TimePicker 时间选择器

-

时分秒选择器

由时、分、秒三部分组成的选择界面。用户需要输入精度到秒的时间时使用。

自定义时间格式的选择器

如果场景需要自定义格式，可以通过format更改时间格式，面板和输入框会跟随格式变化。

时分选择

毫秒选择

自定义步长时间选择器

由时、分两部分组成的选择界面，且分钟刻度步长大于 1。用户对时间精度要求不高的场景，如数据筛选。

十二小时制时间选择器

12 小时制式的时间格式显示。用户需要以 12 小时制式显示时间时使用。

时间区间选择器

用于某一段时间的选择。用户需要输入一段时间区间时使用。

-

可通过键盘直接输入

默认开启改功能，当选中时、分、秒中的某一项时，可通过数字键盘直接输入或方向键进行时、分、秒的修改。

允许输入

禁止输入

不展示清空按钮

限定组件不具备清空按钮。默认组件将会在具备时间值的时候展示清空按钮。

具备清空按钮

禁止清空按钮

禁用

禁止组件的使用。

禁用整个选择器

禁用指定时间

禁用指定时间 同时展示禁用的时间选项

单独使用时间选择器面板部分

如果只需要面板部分，可以通过使用TimePickerPanel来满足使用场景。

  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 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
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 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

预设快捷时间选择

可以通过presets设置。

DEMO (🚧建设中）...

TimePicker Props

名称类型默认值描述必传
allowInputBooleanfalse是否允许直接输入时间N
borderlessBooleanfalse无边框模式N
clearableBooleanfalse是否允许清除选中值N
disableTimeFunction-禁用时间项的配置函数。TS 类型：(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number> }>N
disabledBooleanundefined是否禁用组件N
formatStringHH:mm:ss用于格式化时间，详细文档N
hideDisabledTimeBooleantrue是否隐藏禁用状态的时间项N
inputPropsObject-透传给输入框（Input）组件的参数。TS 类型：InputProps，Input API Documents。详细类型定义N
placeholderStringundefined占位符N
popupPropsObject-透传给 popup 组件的参数。TS 类型：PopupProps，Popup API Documents。详细类型定义N
presetsObject-预设快捷时间选择，示例：{ '前一小时': '11:00:00' }。TS 类型：PresetTime interface PresetTime { [presetName: string]: TimePickerValue | (() => TimePickerValue) }。详细类型定义N
readonlyBooleanfalse只读状态，值为真会隐藏输入框，且无法打开下拉框N
sizeStringmedium尺寸。可选项：small/medium/largeN
statusStringdefault输入框状态。可选项：default/success/warning/errorN
stepsArray[1, 1, 1]时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：Array<string | number>N
tipsString / Slot / Function-输入框下方提示文本，会根据不同的 status 呈现不同的样式。TS 类型：string | TNode。通用类型定义N
valueString-选中值。支持语法糖 v-model。TS 类型：TimePickerValue type TimePickerValue = string。详细类型定义N
defaultValueString-选中值。非受控属性。TS 类型：TimePickerValue type TimePickerValue = string。详细类型定义N
onBlurFunctionTS 类型：(context: { value: TimePickerValue; e: FocusEvent }) => void
当输入框失去焦点时触发，value 表示组件当前有效值		N
onChangeFunctionTS 类型：(value: TimePickerValue) => void
选中值发生变化时触发		N
onCloseFunctionTS 类型：(context: { e: MouseEvent }) => void
面板关闭时触发		N
onFocusFunctionTS 类型：(context: { value: TimePickerValue; e: FocusEvent }) => void
输入框获得焦点时触发，value 表示组件当前有效值		N
onInputFunctionTS 类型：(context: { value: TimePickerValue; e: InputEvent }) => void
当输入框内容发生变化时触发，参数 value 表示组件当前有效值		N
onOpenFunctionTS 类型：(context: { e: MouseEvent }) => void
面板打开时触发		N
onPickFunctionTS 类型：(value: TimePickerValue, context: { e: MouseEvent }) => void
面板选中值后触发		N

TimePicker Events

名称参数描述
blur(context: { value: TimePickerValue; e: FocusEvent })当输入框失去焦点时触发，value 表示组件当前有效值
change(value: TimePickerValue)选中值发生变化时触发
close(context: { e: MouseEvent })面板关闭时触发
focus(context: { value: TimePickerValue; e: FocusEvent })输入框获得焦点时触发，value 表示组件当前有效值
input(context: { value: TimePickerValue; e: InputEvent })当输入框内容发生变化时触发，参数 value 表示组件当前有效值
open(context: { e: MouseEvent })面板打开时触发
pick(value: TimePickerValue, context: { e: MouseEvent })面板选中值后触发

TimeRangePicker Props

名称类型默认值描述必传
allowInputBooleanfalse是否允许直接输入时间N
autoSwapBooleantrue是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 falseN
borderlessBooleanfalse无边框模式N
clearableBooleanfalse是否允许清除选中值N
disableTimeFunction-禁用时间项。TS 类型：(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }> type TimeRangePickerPartial = 'start' | 'end'。详细类型定义N
disabledBoolean / Arrayundefined是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：boolean | Array<boolean>N
formatStringHH:mm:ss用于格式化时间，详细文档N
hideDisabledTimeBooleantrue是否隐藏禁用状态的时间项N
labelString / Slot / Function-左侧文本。TS 类型：string | TNode。通用类型定义N
placeholderString / Arrayundefined占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：string | Array<string>N
popupPropsObject-透传给 popup 组件的参数。TS 类型：PopupProps，Popup API Documents。详细类型定义N
presetsObject-预设快捷时间范围选择，示例：{ '下午': ['13:00:00', '18:00:00'] }。TS 类型：PresetTimeRange interface PresetTimeRange { [presetRageName: string]: TimeRangeValue | (() => TimeRangeValue)}。详细类型定义N
rangeInputPropsObject-透传给范围输入框 RangeInput 组件的参数。TS 类型：RangeInputProps，RangeInput API Documents。详细类型定义N
sizeStringmedium尺寸。可选项：small/medium/largeN
statusStringdefault输入框状态。可选项：default/success/warning/errorN
stepsArray[1, 1, 1]时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：Array<string | number>N
tipsString / Slot / Function-输入框下方提示文本，会根据不同的 status 呈现不同的样式。TS 类型：string | TNode。通用类型定义N
valueArray-选中值。支持语法糖 v-model。TS 类型：TimeRangeValue type TimeRangeValue = Array<string>。详细类型定义N
defaultValueArray-选中值。非受控属性。TS 类型：TimeRangeValue type TimeRangeValue = Array<string>。详细类型定义N
onBlurFunctionTS 类型：(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void
当输入框失去焦点时触发。详细类型定义。
type TimeRangePickerPartial = 'start' | 'end'
N
onChangeFunctionTS 类型：(value: TimeRangeValue) => void
选中值发生变化时触发		N
onFocusFunctionTS 类型：(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void
范围输入框获得焦点时触发。详细类型定义。
type TimeRangePickerPartial = 'start' | 'end'
N
onInputFunctionTS 类型：(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) => void
当输入框内容发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值。详细类型定义。
type TimeRangePickerPartial = 'start' | 'end'
N
onPickFunctionTS 类型：(value: TimeRangeValue, context: { e: MouseEvent, position?: TimeRangePickerPartial }) => void
面板选中值后触发		N

TimeRangePicker Events

名称参数描述
blur(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) 当输入框失去焦点时触发。详细类型定义。
type TimeRangePickerPartial = 'start' | 'end'
change(value: TimeRangeValue)选中值发生变化时触发
focus(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) 范围输入框获得焦点时触发。详细类型定义。
type TimeRangePickerPartial = 'start' | 'end'
input(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) 当输入框内容发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值。详细类型定义。
type TimeRangePickerPartial = 'start' | 'end'
pick(value: TimeRangeValue, context: { e: MouseEvent, position?: TimeRangePickerPartial })面板选中值后触发

何时使用

当在表单中需要时间输入，或表格中需要进行时间条件筛选时。

组件搭配使用

可与日期选择器一起使用，表达某日期精准的时间。

常见用法

时间选择器常用在表单设计中。

相似组件

组件名何时使用
时间选择器当在表单中需要时间输入，或表格中需要进行时间条件筛选时。
日期选择器当在表单中需要日期输入，或表格中需要进行日期条件筛选时。

Web 桌面端

Vue Stable Version：undefined
Vue Next Stable Version：undefined
React Stable Version：undefined

Mobile 移动端

Vue Next Stable Version：alpha
React Alpha Version：alpha
Flutter Alpha Version：alpha
微信小程序 Stable Version：alpha
QQ 小程序 Alpha Version：alpha
  • year
  • quarter
  • month
  • week
  • date
  • left
  • top
  • right
  • bottom