2020-12-06 23:52:47 +08:00
|
|
|
import { defineComponent, h } from 'vue'
|
2020-09-16 14:49:21 +08:00
|
|
|
import dayjs from 'dayjs'
|
|
|
|
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
|
|
import { DEFAULT_FORMATS_TIME } from './common/constant'
|
|
|
|
import Picker from './common/picker.vue'
|
|
|
|
import TimePickPanel from './time-picker-com/panel-time-pick.vue'
|
|
|
|
import TimeRangePanel from './time-picker-com/panel-time-range.vue'
|
2020-12-16 22:10:35 +08:00
|
|
|
import { defaultProps } from './common/props'
|
2020-09-16 14:49:21 +08:00
|
|
|
dayjs.extend(customParseFormat)
|
2020-11-02 11:05:08 +08:00
|
|
|
|
2020-12-06 23:52:47 +08:00
|
|
|
export default defineComponent({
|
2020-09-16 14:49:21 +08:00
|
|
|
name: 'ElTimePicker',
|
2020-11-20 20:24:16 +08:00
|
|
|
install: null,
|
2020-09-16 14:49:21 +08:00
|
|
|
props: {
|
2020-12-16 22:10:35 +08:00
|
|
|
...defaultProps,
|
2020-09-16 14:49:21 +08:00
|
|
|
isRange: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
},
|
2020-12-18 10:57:47 +08:00
|
|
|
emits: ['update:modelValue'],
|
2020-12-16 22:10:35 +08:00
|
|
|
setup(props, ctx) {
|
2020-09-16 14:49:21 +08:00
|
|
|
const type = props.isRange ? 'timerange' : 'time'
|
|
|
|
const panel = props.isRange ? TimeRangePanel : TimePickPanel
|
|
|
|
return () => h(Picker, {
|
|
|
|
format: DEFAULT_FORMATS_TIME,
|
2020-12-16 22:10:35 +08:00
|
|
|
...props, // allow format to be overwrite
|
2020-09-16 14:49:21 +08:00
|
|
|
type,
|
2020-12-16 22:10:35 +08:00
|
|
|
'onUpdate:modelValue': value => ctx.emit('update:modelValue', value),
|
2020-09-16 14:49:21 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
default: scopedProps => h(panel, scopedProps),
|
|
|
|
})
|
|
|
|
},
|
2020-12-06 23:52:47 +08:00
|
|
|
})
|