TimePicker

To select/input a time.

When to use

By clicking the input box, you can select a time from a popup panel.

Examples

Basic

Click TimePicker, and then we could select or input a time in panel.

Three Sizes

The input box comes in three sizes: large, medium and small. Large is used in the form, while the medium size is the default.

disabled

A disabled state of the TimePicker.

interval option

Show stepped options by hourStep minuteStep secondStep.

12 hours

TimePicker of 12 hours format, with default format h:mm:ss a.

Time Range Picker

Use time range picker with TimePicker.RangePicker.

Status

Add status to TimePicker with status, which could be error or warning.

Custom semantic dom styling

You can customize the semantic dom style of TimePicker by passing objects/functions through classNames and styles.

Under Control

value and onChange should be used together,

Need Confirm

TimePicker will automatically determine whether to show a confirm button according to the picker property. You can also set the needConfirm property to determine whether to show a confirm button. When needConfirm is set, the user must click the confirm button to complete the selection. Otherwise, the selection will be submitted when the picker loses focus or select a time.

Hour and minute

While part of format is omitted, the corresponding column in panel will disappear, too.

Addon

Render addon contents to time picker panel's bottom.

Change on scroll

Use changeOnScroll and needConfirm to change the value when scrolling.

Variants

Variants of TimePicker, there are four variants: outlined filled borderless and underlined.

Prefix and Suffix

Custom prefix and suffixIcon.

API

TimePicker and TimePicker.RangePicker are exported from @ceebee/ui/client.

TimePicker

Property	Description	Type	Default	Version
`allowClear`	Customize clear icon	`boolean \| { clearIcon?: ReactNode }`	`true`	5.8.0: Support object type
`addon`	Called from time picker panel to render an addon to its bottom, please use renderExtraFooter instead	`() => ReactNode`	`-`	-
`cellRender`	Custom rendering function for picker cells	`(current: number, info: { originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode`	`-`	5.4.0
`changeOnScroll`	Trigger selection when scroll the column	`boolean`	`false`	5.14.0
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`defaultValue`	To set default time	`dayjs`	`-`	—
`disabled`	Determine whether the TimePicker is disabled	`boolean`	`false`	—
`disabledTime`	To specify the time that cannot be selected	`DisabledTime`	`-`	4.19.0
`format`	To set the time format	`string`	`HH:mm:ss`	—
`getPopupContainer`	To set the container of the floating layer, while the default is to create a div element in body	`function(trigger)`	`-`	—
`hideDisabledOptions`	Whether hide the options that can not be selected	`boolean`	`false`	—
`hourStep`	Interval between hours in picker	`number`	`1`	—
`inputReadOnly`	Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices)	`boolean`	`false`	—
`minuteStep`	Interval between minutes in picker	`number`	`1`	—
`needConfirm`	Need click confirm button to trigger value change	`boolean`	`-`	5.14.0
`open`	Whether to popup panel	`boolean`	`false`	—
`placeholder`	Display when there's no value	`string \| \[string, string]`	`Select a time`	—
`placement`	The position where the selection box pops up	`bottomLeft bottomRight topLeft topRight`	`bottomLeft`	—
`popupClassName`	The className of panel, please use classNames.popup instead	`string`	`-`	—
`popupStyle`	The style of panel, please use styles.popup instead	`CSSProperties`	`-`	—
`prefix`	The custom prefix	`ReactNode`	`-`	5.22.0
`previewValue`	When the user selects the time hover option, the value of the input field undergoes a temporary change	`false \| hover`	`hover`	6.0.0
`renderExtraFooter`	Called from time picker panel to render some addon to its bottom	`() => ReactNode`	`-`	—
`secondStep`	Interval between seconds in picker	`number`	`1`	—
`showNow`	Whether to show Now button on panel	`boolean`	`-`	4.4.0
`size`	To determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px	`large \| medium \| small`	`-`	—
`status`	Set validation status	`'error' \| 'warning' \| 'success' \| 'validating'`	`-`	4.19.0
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`suffixIcon`	The custom suffix icon	`ReactNode`	`-`	—
`use12Hours`	Display as 12 hours format, with default format h:mm:ss a	`boolean`	`false`	—
`value`	To set time	`dayjs`	`-`	—
`variant`	Variants of picker	`outlined \| borderless \| filled \| underlined`	`outlined`	5.13.0 \| underlined: 5.24.0
`onCalendarChange`	Callback function, can be executed when the start time or the end time of the range is changing. info argument is added in 4.4.0	`function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:start\|end })`	`-`	—
`onChange`	A callback function, can be executed when the selected time is changing	`function(time: dayjs, timeString: string): void`	`-`	—
`onClear`	Callback when click the clear button	`() => void`	`-`	6.5.0
`onOpenChange`	A callback function which will be called while panel opening/closing	`(open: boolean) => void`	`-`	—
`blur()`	Remove focus	`—`	`—`	—
`focus()`	Get focus	`—`	`—`	—

RangePicker

Property	Description	Type	Default	Version
`disabledTime`	To specify the time that cannot be selected	`RangeDisabledTime`	`-`	4.19.0
`order`	Order start and end time	`boolean`	`true`	4.1.0