Skip to content

TimePicker 时间选择器

规则

基础示例

Props 配置示例

自定义格式

时间范围选择

整段禁用

尺寸对比(小 / 中 / 大)

Events 事件示例

监听时间变化

时间选择后联动更新

完整配置项:TDesign_TimePicker

valuestring | string[]

Props

参数说明类型默认值版本
allowInput是否允许直接输入booleanfalse-
borderless无边框模式booleanfalse-
clearable是否可清除booleanfalse-
disableTime禁用时间项(h, m, s, ms) => Partial<{ hour; minute; second; millisecond }>--
disabled是否禁用boolean--
format时间格式stringHH:mm:ss-
hideDisabledTime是否隐藏禁用时间项booleantrue-
inputProps透传 InputInputProps--
label左侧文本string | TNode--
placeholder占位符string--
popupProps透传 PopupPopupProps--
prefixIcon前置图标TNode--
presets预设快捷时间PresetTime--
readonly只读boolean--
selectInputProps透传 SelectInputSelectInputProps--
size尺寸small | medium | largemedium-
status状态default | success | warning | errordefault-
steps时间间隔步数 [时,分,秒]Array<string | number>[1,1,1]-
suffixIcon后置图标TNode--
tips下方提示string | TNode--
value选中值string--
defaultValue非受控值string--
valueDisplay自定义选中项呈现string | TNode<{ value }>--

Events

事件说明类型版本
blur失去焦点(context: { value: TimePickerValue } & SelectInputBlurContext) => void-
change选中值变化(value: TimePickerValue) => void-
clear清空(context: { e: MouseEvent }) => void-
close面板关闭(context: { e: MouseEvent }) => void-
confirm点击确认(context: { e: MouseEvent }) => void-
focus获得焦点(context: { value; e: FocusEvent }) => void-
input输入变化(context: { value; e: InputEvent }) => void-
open面板打开(context: { e: MouseEvent }) => void-
pick面板选中值(value, context: { e: MouseEvent }) => void-

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用