1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| import { computed, defineComponent, provide, reactive, ref, toRef } from 'vue'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat.js'
import advancedFormat from 'dayjs/plugin/advancedFormat.js'
import localeData from 'dayjs/plugin/localeData.js'
import weekOfYear from 'dayjs/plugin/weekOfYear.js'
import weekYear from 'dayjs/plugin/weekYear.js'
import dayOfYear from 'dayjs/plugin/dayOfYear.js'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter.js'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore.js'
import { useNamespace } from 'element-plus/es/hooks/use-namespace/index.mjs'
import {
CommonPicker,
DEFAULT_FORMATS_DATE,
DEFAULT_FORMATS_DATEPICKER,
type DateModelType,
type SingleOrRange,
} from 'element-plus/es/components/time-picker/index.mjs'
import { UPDATE_MODEL_EVENT } from 'element-plus/es/constants/index.mjs'
import { ROOT_PICKER_INJECTION_KEY } from 'element-plus/es/components/date-picker/src/constants.mjs'
import { datePickerProps } from 'element-plus/es/components/date-picker/src/props/date-picker.mjs'
import { getPanel } from 'element-plus/es/components/date-picker/src/panel-utils.mjs'
import type { DatePickerExpose } from 'element-plus/es/components/date-picker/src/instance.mjs'
import DatePickPanel from './components/PanelDatePick.vue'
dayjs.extend(localeData)
dayjs.extend(advancedFormat)
dayjs.extend(customParseFormat)
dayjs.extend(weekOfYear)
dayjs.extend(weekYear)
dayjs.extend(dayOfYear)
dayjs.extend(isSameOrAfter)
dayjs.extend(isSameOrBefore)
export default defineComponent({
name: 'ElDatePicker',
install: null,
props: datePickerProps,
emits: [UPDATE_MODEL_EVENT],
setup(props, { expose, emit, slots }) {
const ns = useNamespace('picker-panel')
const isDefaultFormat = computed(() => {
return !props.format
})
provide('ElIsDefaultFormat', isDefaultFormat)
provide('ElPopperOptions', reactive(toRef(props, 'popperOptions')))
provide(ROOT_PICKER_INJECTION_KEY, {
slots,
pickerNs: ns,
})
const commonPicker = ref<InstanceType<typeof CommonPicker>>()
const refProps: DatePickerExpose = {
focus: () => {
commonPicker.value?.focus()
},
blur: () => {
commonPicker.value?.blur()
},
handleOpen: () => {
commonPicker.value?.handleOpen()
},
handleClose: () => {
commonPicker.value?.handleClose()
},
}
expose(refProps)
const onModelValueUpdated = (val: SingleOrRange<DateModelType> | null) => {
emit(UPDATE_MODEL_EVENT, val)
}
return () => {
const format =
props.format ??
(DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE)
let Component = getPanel(props.type)
if (!['daterange', 'datetimerange', 'monthrange', 'yearrange'].includes(props.type)) {
Component = DatePickPanel as any
}
return (
<CommonPicker
{...props}
format={format}
type={props.type}
ref={commonPicker}
onUpdate:modelValue={onModelValueUpdated}
>
{{
default: (scopedProps: /**FIXME: remove any type */ any) => (
<Component {...scopedProps}>
{{
'prev-month': slots['prev-month'],
'next-month': slots['next-month'],
'prev-year': slots['prev-year'],
'next-year': slots['next-year'],
}}
</Component>
),
'range-separator': slots['range-separator'],
}}
</CommonPicker>
)
}
},
})
|
