TimePicker 时间选择器
用于选择或输入日期
任意时间点
可以选择任意时间
提供了两种交互方式:默认情况下通过鼠标滚轮进行选择,打开 arrow-control
属性则通过界面上的箭头进行选择。
限制时间选择范围
您也可以限制时间选择范围。
通过 disabledHours
,disabledMinutes
和 disabledSeconds
限制可选时间范围。
任意时间范围
定制
在时间范围选择的时候,我们分别使用dataIndex
和 dataIndexEnd
属性,配置 开始时间
和 结束时间
可选择任意的时间范围
添加 is-range
属性即可选择时间范围。 同样支持 arrow-control
属性。
属性
TimePicker
完全继承了 ElTimePicker
的属性 您可以从下面的链接里找到相关文档
typescript
声明
export type VTimePickerProps = VueProps<typeof ElTimePicker>
export type VBaseTimePickerProps = Omit<VTimePickerProps, 'isRange'>
export type VSingleTimePickerProps = Omit<VBaseTimePickerProps, 'startPlaceholder' | 'endPlaceholder' | 'rangeSeparator'> & {
isRange?: false | undefined
}
export interface VSingleTimePicker<
T extends object,
Key extends DeepKey<T> = DeepKey<T>
> extends VBaseItem<T, Key> {
props?: VPropDef<T, VSingleTimePickerProps>
transfer?: VTransfer<Into<T, Key>, dayjs.Dayjs | number | Date>
}
export type VRangeTimePickerProps = Omit<VBaseTimePickerProps, 'placeholder'> & {
isRange: true
}
export interface VRangeTimePicker<
T extends object,
Key extends DeepKey<T> = DeepKey<T>,
EndKey extends DeepKey<T> = DeepKey<T>
> extends VBaseItem<T, Key> {
dataIndexEnd: EndKey
props?: VPropDef<T, VRangeTimePickerProps>
transfer?: VTransfer<Into<T, Key | EndKey>, dayjs.Dayjs | number | Date>
}
export type VTimePickerItem<T extends object, Key extends DeepKey<T> = DeepKey<T>> = (VSingleTimePicker<T, Key> | VRangeTimePicker<T, Key>)
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
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