TimePicker
时间选择框

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat'

dayjs.extend(customParseFormat)
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;

参数	说明	类型	默认值	版本
allowClear	自定义清除按钮	boolean \| { clearIcon?: ReactNode }	true	5.8.0: 支持对象类型
autoFocus	自动获取焦点	boolean	false
cellRender	自定义单元格的内容	(current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode	-	5.4.0
changeOnScroll	在滚动时改变选择值	boolean	false	5.14.0
className	选择器类名	string	-
defaultValue	默认时间	dayjs	-
disabled	禁用全部操作	boolean	false
disabledTime	不可选择的时间	DisabledTime	-	4.19.0
format	展示的时间格式	string	`HH:mm:ss`
getPopupContainer	定义浮层的容器，默认为 body 上新建 div	function(trigger)	-
hideDisabledOptions	隐藏禁止选择的选项	boolean	false
hourStep	小时选项间隔	number	1
inputReadOnly	设置输入框为只读（避免在移动设备上打开虚拟键盘）	boolean	false
minuteStep	分钟选项间隔	number	1
needConfirm	是否需要确认按钮，为 `false` 时失去焦点即代表选择	boolean	-	5.14.0
open	面板是否打开	boolean	false
placeholder	没有值的时候显示的内容	string \| [string, string]	`请选择时间`
placement	选择框弹出的位置	`bottomLeft` `bottomRight` `topLeft` `topRight`	bottomLeft
popupClassName	弹出层类名	string	-
popupStyle	弹出层样式对象	object	-
prefix	自定义前缀	ReactNode	-	5.22.0
renderExtraFooter	选择框底部显示自定义的内容	() => ReactNode	-
secondStep	秒选项间隔	number	1
showNow	面板是否显示“此刻”按钮	boolean	-	4.4.0
size	输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px	`large` \| `middle` \| `small`	-
status	设置校验状态	'error' \| 'warning'	-	4.19.0
suffixIcon	自定义的选择框后缀图标	ReactNode	-
use12Hours	使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a`	boolean	false
value	当前时间	dayjs	-
variant	形态变体	`outlined` \| `borderless` \| `filled` \| `underlined`	`outlined`	5.13.0 \| `underlined`: 5.24.0
onCalendarChange	待选日期发生变化的回调。`info` 参数自 4.4.0 添加	function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range:`start`\|`end` })	-
onChange	时间发生变化的回调	function(time: dayjs, timeString: string): void	-
onOpenChange	面板打开/关闭时的回调	(open: boolean) => void	-

DisabledTime

type DisabledTime = (now: Dayjs) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
  disabledMilliseconds?: (
    selectedHour: number,
    selectedMinute: number,
    selectedSecond: number,
  ) => number[];
};

注意：disabledMilliseconds 为 5.14.0 新增。

方法

名称	描述	版本
blur()	移除焦点
focus()	获取焦点

RangePicker

属性与 DatePicker 的 RangePicker 相同。还包含以下属性：

参数	说明	类型	默认值	版本
disabledTime	不可选择的时间	RangeDisabledTime	-	4.19.0
order	始末时间是否自动排序	boolean	true	4.1.0

RangeDisabledTime

type RangeDisabledTime = (
  now: Dayjs,
  type = 'start' | 'end',
) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
activeBg	输入框激活状态时背景颜色	string	#ffffff
activeBorderColor	激活态边框色	string	#1677ff
activeShadow	激活态阴影	string	0 0 0 2px rgba(5,145,255,0.1)
addonBg	前/后置标签背景色	string	rgba(0,0,0,0.02)
cellActiveWithRangeBg	选取范围内的单元格背景色	string	#e6f4ff
cellBgDisabled	单元格禁用态背景色	string	rgba(0,0,0,0.04)
cellHeight	单元格高度	number	24
cellHoverBg	单元格悬浮态背景色	string	rgba(0,0,0,0.04)
cellHoverWithRangeBg	选取范围内的单元格悬浮态背景色	string	#cbe0fd
cellRangeBorderColor	选取范围时单元格边框色	string	#82b4f9
cellWidth	单元格宽度	number	36
errorActiveShadow	错误状态时激活态阴影	string	0 0 0 2px rgba(255,38,5,0.06)
hoverBg	输入框hover状态时背景颜色	string	#ffffff
hoverBorderColor	悬浮态边框色	string	#4096ff
inputFontSize	字体大小	number	14
inputFontSizeLG	大号字体大小	number	16
inputFontSizeSM	小号字体大小	number	14
multipleItemBg	多选标签背景色	string	rgba(0,0,0,0.06)
multipleItemBorderColor	多选标签边框色	string	transparent
multipleItemBorderColorDisabled	多选标签禁用边框色	string	transparent
multipleItemColorDisabled	多选标签禁用文本颜色	string	rgba(0,0,0,0.25)
multipleItemHeight	多选标签高度	number	24
multipleItemHeightLG	大号多选标签高度	number	32
multipleItemHeightSM	小号多选标签高度	number	16
multipleSelectorBgDisabled	多选框禁用背景	string	rgba(0,0,0,0.04)
paddingBlock	输入框纵向内边距	number	4
paddingBlockLG	大号输入框纵向内边距	number	7
paddingBlockSM	小号输入框纵向内边距	number	0
paddingInline	输入框横向内边距	number	11
paddingInlineLG	大号输入框横向内边距	number	11
paddingInlineSM	小号输入框横向内边距	number	7
presetsMaxWidth	预设区域最大宽度	number	200
presetsWidth	预设区域宽度	number	120
textHeight	单元格文本高度	number	40
timeCellHeight	时间单元格高度	number	28
timeColumnHeight	时间列高度	number	224
timeColumnWidth	时间列宽度	number	56
warningActiveShadow	警告状态时激活态阴影	string	0 0 0 2px rgba(255,215,5,0.1)
withoutTimeCellHeight	十年/年/季/月/周单元格高度	number	66
zIndexPopup	弹窗 z-index	number	1050

全局 Token如何定制？

FAQ

如何在 TimePicker 中使用自定义日期库（如 Moment.js ）

TimePicker时间选择框

何时使用

代码演示

API

DisabledTime

方法

RangePicker

RangeDisabledTime

主题变量（Design Token）

组件 Token如何定制？

全局 Token如何定制？

FAQ

TimePicker
时间选择框