TimePicker

Select the time on the popup panel to conveniently complete the time input control.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: The basic usage of TimePicker.
Status: different status
Under Control: value and onChange need to be used together.
Prefix: Set the prefix via the prefix property
Size: There are four sizes.
Disabled: Disabled.
Custom format: By setting format, you can customize the hour, minute, and second.
Step: By setting step, you can customize the step length of the hour, minute, and second.
defaultValue: TimePicker has a default value.
Extra content: Show extra content.
Disable partial time option: By setting disabledHours disabledMinutes disabledSeconds, you can disable some options of hour/minute/second.
12 hours: By setting use12Hours, you can customize the hours, minutes, and seconds.
RangePicker: Select time range.
disableConfirm: Skip the confirm step and click directly to select time.
UTC: Use utcOffset to set the UTC time. Note: When using UTC or time zonetime, use timestamp or Date object when passing value. Strings cannot represent unique time, which will cause trouble.
Timezone: Use timezone to set timezone, if set the utcOffset, utcOffset takes effect. Note: When using UTC or time zonetime, use timestamp or Date object when passing value. Strings cannot represent unique time, which will cause trouble.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Picker

Common properties of TimePicker and RangePicker

Property	Description	Type	DefaultValue	Version
allowClear	Whether to show clear button	boolean	`true`	-
disableConfirm	Disable the confirm step, click to select time directly without click the confirm button.	boolean	`-`	2.12.0
disabled	Whether to disable	boolean	`-`	-
editable	Whether input box can be entered	boolean	`true`	-
error	Whether the textarea is error.(Deprecated, removed in the next major version, use status='error' instead)	boolean	`-`	-
hideDisabledOptions	Hide the disabled options	boolean	`-`	-
popupVisible	Whether the popup is visible or not	boolean	`-`	-
scrollSticky	The time column is automatically adsorbed and selected when scrolling	boolean	`true`	2.23.0
unmountOnExit	Whether to destroy popup when hidden	boolean	`-`	-
use12Hours	Display as 12 hours format, with default format h:mm:ss a	boolean	`-`	-
utcOffset	Set the timezone offset, set to 0 if utc time is required.	number	`-`	-
format	Date format, refer to dayjs	string	`HH:mm:ss`	-
timezone	timezone name, if `utcOffset` is set, `utcOffset` takes effect.	string	`-`	-
position	The position of the popup box	'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'	`bl`	-
size	Input box size	'mini' \| 'small' \| 'default' \| 'large'	`-`	-
status	Status	'error' \| 'warning'	`-`	2.45.0
extra	Additional content at the bottom	ReactNode	`-`	-
prefix	prefix	ReactNode	`-`	2.43.0
triggerElement	Trigger element.	ReactNode	`-`	2.38.0
className	Additional css class	string \| string[]	`-`	-
icons	Used to configure icons	{ inputSuffix?: ReactNode }	`-`	-
placeholder	The placeholder of input box	string \| string[]	`-`	-
step	Set the hour/minute/second selection interval.	{ hour?: number; minute?: number; second?: number }	`-`	-
style	Additional style	CSSProperties	`-`	-
triggerProps	The props of the `Trigger` component	Partial<TriggerProps>	`-`	-
disabledHours	To specify the hours that cannot be selected	() => number[]	`-`	-
disabledMinutes	To specify the minutes that cannot be selected	(selectedHour) => number[]	`-`	-
disabledSeconds	To specify the seconds that cannot be selected	(selectedHour, selectedMinute) => number[]	`-`	-
getPopupContainer	The parent node of the popup	(node: HTMLElement) => Element	`-`	-
onClear	Callback when click the clear button	() => void	`-`	-

TimePicker

Property	Description	Type	DefaultValue	Version
showNowBtn	Whether to show the button to select current time	boolean	`true`	2.21.0
defaultValue	To set default time	CalendarValue	`-`	-
value	To set time	CalendarValue	`-`	-
onChange	Callback when selected value changes	(valueString: string, value: Dayjs) => void	`-`	-
onSelect	Callback when select time	(valueString: string, value: Dayjs) => void	`-`	-

TimePicker.RangePicker

Property	Description	Type	DefaultValue	Version
order	Whether the start and end times are automatically sorted	boolean	`true`	2.21.0
defaultValue	To set default time	CalendarValue[]	`-`	-
placeholder	The placeholder of input box	string[]	`-`	-
value	To set time	CalendarValue[]	`-`	-
onChange	Callback when the selected value changes	(valueString: string[], value: Dayjs[]) => void	`-`	-
onSelect	Callback when select time	(valueString: string[], value: Dayjs[]) => void	`-`	-

CalendarValue

export type CalendarValue = Dayjs | Date | string | number;