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

typescript

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

typescript

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

Semantic DOM

Single

Multiple

root
5.25.0
根元素
popup.root
5.25.0
弹出框根元素

主题变量（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 ）

API

通用属性参考：通用属性

jsx

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

typescript

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

typescript

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

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

cellHoverBg

单元格悬浮态背景色

string

rgba(0,0,0,0.04)

cellHoverWithRangeBg

选取范围内的单元格悬浮态背景色

string

#cbe0fd

cellRangeBorderColor

选取范围时单元格边框色

string

#82b4f9

cellWidth

单元格宽度

number

errorActiveShadow

错误状态时激活态阴影

string

0 0 0 2px rgba(255,38,5,0.06)

hoverBg

输入框hover状态时背景颜色

string

#ffffff

hoverBorderColor

悬浮态边框色

string

#4096ff

inputFontSize

字体大小

number

inputFontSizeLG

大号字体大小

number

inputFontSizeSM

小号字体大小

number

multipleItemBg

多选标签背景色

string

rgba(0,0,0,0.06)

multipleItemBorderColor

多选标签边框色

string

transparent

multipleItemBorderColorDisabled

多选标签禁用边框色

string

transparent

multipleItemColorDisabled

多选标签禁用文本颜色

string

rgba(0,0,0,0.25)

multipleItemHeight

多选标签高度

number

multipleItemHeightLG

大号多选标签高度

number

multipleItemHeightSM

小号多选标签高度

number

multipleSelectorBgDisabled

多选框禁用背景

string

rgba(0,0,0,0.04)

paddingBlock

输入框纵向内边距

number

paddingBlockLG

大号输入框纵向内边距

number

paddingBlockSM

小号输入框纵向内边距

number

paddingInline

输入框横向内边距

number

paddingInlineLG

大号输入框横向内边距

number

paddingInlineSM

小号输入框横向内边距

number

presetsMaxWidth

预设区域最大宽度

number

200

presetsWidth

预设区域宽度

number

120

textHeight

单元格文本高度

number

timeCellHeight

时间单元格高度

number

timeColumnHeight

时间列高度

number

224

timeColumnWidth

时间列宽度

number

warningActiveShadow

警告状态时激活态阴影

string

0 0 0 2px rgba(255,215,5,0.1)

withoutTimeCellHeight

十年/年/季/月/周单元格高度

number

zIndexPopup

弹窗 z-index

number

1050

Ant Design

TimePicker
时间选择框

Ant Design

TimePicker
时间选择框

何时使用

代码演示

API

DisabledTime

方法

RangePicker

RangeDisabledTime

Semantic DOM

root

popup.root

主题变量（Design Token）

FAQ

何时使用

代码演示

API

DisabledTime

方法

RangePicker

RangeDisabledTime

Semantic DOM

root

popup.root

主题变量（Design Token）

FAQ

TimePicker时间选择框

TimePicker时间选择框

何时使用

代码演示

API

DisabledTime

方法

RangePicker

RangeDisabledTime

Semantic DOM

root

popup.root

主题变量（Design Token）

FAQ

何时使用

代码演示

API

DisabledTime

方法

RangePicker

RangeDisabledTime

Semantic DOM

root

popup.root

主题变量（Design Token）

FAQ

TimePicker
时间选择框

TimePicker
时间选择框