TimePicker 时间选择器
规则
基础示例
Props 配置示例
自定义格式
时间范围选择
整段禁用
尺寸对比(小 / 中 / 大)
Events 事件示例
监听时间变化
时间选择后联动更新
完整配置项:TDesign_TimePicker
value:string | string[]
Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| allowInput | 是否允许直接输入 | boolean | false | - |
| borderless | 无边框模式 | boolean | false | - |
| clearable | 是否可清除 | boolean | false | - |
| disableTime | 禁用时间项 | (h, m, s, ms) => Partial<{ hour; minute; second; millisecond }> | - | - |
| disabled | 是否禁用 | boolean | - | - |
| format | 时间格式 | string | HH:mm:ss | - |
| hideDisabledTime | 是否隐藏禁用时间项 | boolean | true | - |
| inputProps | 透传 Input | InputProps | - | - |
| label | 左侧文本 | string | TNode | - | - |
| placeholder | 占位符 | string | - | - |
| popupProps | 透传 Popup | PopupProps | - | - |
| prefixIcon | 前置图标 | TNode | - | - |
| presets | 预设快捷时间 | PresetTime | - | - |
| readonly | 只读 | boolean | - | - |
| selectInputProps | 透传 SelectInput | SelectInputProps | - | - |
| size | 尺寸 | small | medium | large | medium | - |
| status | 状态 | default | success | warning | error | default | - |
| 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 | - |


