--- title: TimePicker - 时间选择器 order: 11 path: /TimePicker nav: order: 1 title: 桌面组件 path: /design group: order: 3 title: 数据录入 path: /dataInput --- 用于选择某一具体时间点或某一时间段。 ## 时分秒选择器 由时、分、秒三部分组成的选择界面。用户需要输入精度到秒的时间时使用。 ## 时分选择器 由时、分两部分组成的选择界面。用户需要输入精度到分钟的时间时使用。 ## 时间区间选择器 用于某一段时间的选择。用户需要输入一段时间区间时使用。 ## 禁止 禁止组件的使用。 ## API | 参数 | 说明 | 类型 | 默认值 | | ------------------- | ------------------------------------------------------ | ------------------------------------------------ | ------------ | | allowClear | 是否展示清除按钮 | boolean | true | | autoFocus | 自动获取焦点 | boolean | false | | bordered | 是否有边框 | boolean | true | | className | 选择器类名 | string | - | | clearIcon | 自定义的清除图标 | ReactNode | - | | clearText | 清除按钮的提示文案 | string | clear | | defaultValue | 默认时间 | [moment](http://momentjs.com/) | - | | disabled | 禁用全部操作 | boolean | false | | disabledTime | 不可选择的时间 | [DisabledTime](#DisabledTime) | - | | format | 展示的时间格式 | string | `HH:mm:ss` | | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | | hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | | hourStep | 小时选项间隔 | number | 1 | | inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | | minuteStep | 分钟选项间隔 | number | 1 | | open | 面板是否打开 | boolean | false | | placeholder | 没有值的时候显示的内容 | string \| \[string, string] | `请选择时间` | | placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | popupClassName | 弹出层类名 | string | - | | popupStyle | 弹出层样式对象 | object | - | | renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | | secondStep | 秒选项间隔 | number | 1 | | showNow | 面板是否显示“此刻”按钮 | boolean | - | | status | 设置校验状态 | 'error' \| 'warning' | - | | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | | value | 当前时间 | [moment](http://momentjs.com/) | - | | onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - | | onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | ### DisabledTime ```typescript type DisabledTime = ( now: Moment, ) => { disabledHours?: () => number[]; disabledMinutes?: (selectedHour: number) => number[]; disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]; }; ``` ### 方法 | 名称 | 描述 | | ------- | -------- | | blur() | 移除焦点 | | focus() | 获取焦点 | ### RangePicker 属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性： | 参数 | 说明 | 类型 | 默认值 | | ------------ | -------------------- | --------------------------------------- | ------ | | disabledTime | 不可选择的时间 | [RangeDisabledTime](#RangeDisabledTime) | - | | order | 始末时间是否自动排序 | boolean | true | ### RangeDisabledTime ```typescript type RangeDisabledTime = ( now: Moment, type = 'start' | 'end', ) => { disabledHours?: () => number[]; disabledMinutes?: (selectedHour: number) => number[]; disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]; }; ```