2023-05-19 10:32:44 +00:00
|
|
|
<script>
|
|
|
|
import BaseComponent from 'primevue/basecomponent';
|
2024-04-18 14:13:33 +00:00
|
|
|
import DatePickerStyle from 'primevue/datepicker/style';
|
2023-05-19 10:32:44 +00:00
|
|
|
|
|
|
|
export default {
|
2024-04-18 14:13:33 +00:00
|
|
|
name: 'BaseDatePicker',
|
2023-05-19 10:32:44 +00:00
|
|
|
extends: BaseComponent,
|
|
|
|
props: {
|
|
|
|
modelValue: null,
|
|
|
|
selectionMode: {
|
|
|
|
type: String,
|
|
|
|
default: 'single'
|
|
|
|
},
|
|
|
|
dateFormat: {
|
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
inline: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
showOtherMonths: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
selectOtherMonths: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
showIcon: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
2023-11-23 09:29:16 +00:00
|
|
|
iconDisplay: {
|
|
|
|
type: String,
|
|
|
|
default: 'button'
|
|
|
|
},
|
2023-05-19 10:32:44 +00:00
|
|
|
icon: {
|
|
|
|
type: String,
|
|
|
|
default: undefined
|
|
|
|
},
|
2024-05-27 08:48:42 +00:00
|
|
|
prevIcon: {
|
2023-05-19 10:32:44 +00:00
|
|
|
type: String,
|
|
|
|
default: undefined
|
|
|
|
},
|
|
|
|
nextIcon: {
|
|
|
|
type: String,
|
|
|
|
default: undefined
|
|
|
|
},
|
|
|
|
incrementIcon: {
|
|
|
|
type: String,
|
|
|
|
default: undefined
|
|
|
|
},
|
|
|
|
decrementIcon: {
|
|
|
|
type: String,
|
|
|
|
default: undefined
|
|
|
|
},
|
|
|
|
numberOfMonths: {
|
|
|
|
type: Number,
|
|
|
|
default: 1
|
|
|
|
},
|
|
|
|
responsiveOptions: Array,
|
2023-11-15 10:25:37 +00:00
|
|
|
breakpoint: {
|
|
|
|
type: String,
|
|
|
|
default: '769px'
|
|
|
|
},
|
2023-05-19 10:32:44 +00:00
|
|
|
view: {
|
|
|
|
type: String,
|
|
|
|
default: 'date'
|
|
|
|
},
|
|
|
|
monthNavigator: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
yearNavigator: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
yearRange: {
|
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
minDate: {
|
|
|
|
type: Date,
|
|
|
|
value: null
|
|
|
|
},
|
|
|
|
maxDate: {
|
|
|
|
type: Date,
|
|
|
|
value: null
|
|
|
|
},
|
|
|
|
disabledDates: {
|
|
|
|
type: Array,
|
|
|
|
value: null
|
|
|
|
},
|
|
|
|
disabledDays: {
|
|
|
|
type: Array,
|
|
|
|
value: null
|
|
|
|
},
|
|
|
|
maxDateCount: {
|
|
|
|
type: Number,
|
|
|
|
value: null
|
|
|
|
},
|
|
|
|
showOnFocus: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
autoZIndex: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
baseZIndex: {
|
|
|
|
type: Number,
|
|
|
|
default: 0
|
|
|
|
},
|
|
|
|
showButtonBar: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
shortYearCutoff: {
|
|
|
|
type: String,
|
|
|
|
default: '+10'
|
|
|
|
},
|
|
|
|
showTime: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
timeOnly: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
hourFormat: {
|
|
|
|
type: String,
|
|
|
|
default: '24'
|
|
|
|
},
|
|
|
|
stepHour: {
|
|
|
|
type: Number,
|
|
|
|
default: 1
|
|
|
|
},
|
|
|
|
stepMinute: {
|
|
|
|
type: Number,
|
|
|
|
default: 1
|
|
|
|
},
|
|
|
|
stepSecond: {
|
|
|
|
type: Number,
|
|
|
|
default: 1
|
|
|
|
},
|
|
|
|
showSeconds: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
hideOnDateTimeSelect: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
hideOnRangeSelection: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
timeSeparator: {
|
|
|
|
type: String,
|
|
|
|
default: ':'
|
|
|
|
},
|
|
|
|
showWeek: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
manualInput: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
appendTo: {
|
2024-01-08 09:33:05 +00:00
|
|
|
type: [String, Object],
|
2023-05-19 10:32:44 +00:00
|
|
|
default: 'body'
|
|
|
|
},
|
2024-01-31 08:02:53 +00:00
|
|
|
variant: {
|
|
|
|
type: String,
|
2024-02-01 13:11:24 +00:00
|
|
|
default: null
|
2024-01-31 08:02:53 +00:00
|
|
|
},
|
2024-01-30 11:27:56 +00:00
|
|
|
invalid: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
2023-05-19 10:32:44 +00:00
|
|
|
disabled: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
readonly: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
placeholder: {
|
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
id: {
|
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
inputId: {
|
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
inputClass: {
|
|
|
|
type: [String, Object],
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
inputStyle: {
|
|
|
|
type: Object,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
panelClass: {
|
|
|
|
type: [String, Object],
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
panelStyle: {
|
|
|
|
type: Object,
|
|
|
|
default: null
|
|
|
|
},
|
2024-03-25 12:59:02 +00:00
|
|
|
todayButtonProps: {
|
|
|
|
type: Object,
|
|
|
|
default() {
|
2024-04-08 09:42:06 +00:00
|
|
|
return { severity: 'secondary', text: true, size: 'small' };
|
2024-03-25 12:59:02 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
clearButtonProps: {
|
|
|
|
type: Object,
|
|
|
|
default() {
|
2024-04-08 09:42:06 +00:00
|
|
|
return { severity: 'secondary', text: true, size: 'small' };
|
2024-03-25 12:59:02 +00:00
|
|
|
}
|
|
|
|
},
|
2024-04-09 06:05:44 +00:00
|
|
|
navigatorButtonProps: {
|
|
|
|
type: Object,
|
|
|
|
default() {
|
2024-05-05 17:35:03 +00:00
|
|
|
return { severity: 'secondary', text: true, rounded: true };
|
2024-04-09 06:05:44 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
timepickerButtonProps: {
|
|
|
|
type: Object,
|
|
|
|
default() {
|
2024-05-05 17:35:03 +00:00
|
|
|
return { severity: 'secondary', text: true, rounded: true };
|
2024-04-09 06:05:44 +00:00
|
|
|
}
|
|
|
|
},
|
2023-11-24 12:15:40 +00:00
|
|
|
ariaLabelledby: {
|
2023-05-19 10:32:44 +00:00
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
2023-11-24 12:15:40 +00:00
|
|
|
ariaLabel: {
|
2023-05-19 10:32:44 +00:00
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
}
|
|
|
|
},
|
2024-04-18 14:13:33 +00:00
|
|
|
style: DatePickerStyle,
|
2023-05-30 11:03:42 +00:00
|
|
|
provide() {
|
|
|
|
return {
|
2024-04-25 01:26:06 +00:00
|
|
|
$pcDatePicker: this,
|
2023-05-30 11:03:42 +00:00
|
|
|
$parentInstance: this
|
|
|
|
};
|
2023-05-19 10:32:44 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|