Search
Time Picker

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

Time Picker


Basic

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

Under Control

value and onChange should be used together,

Disabled

A disabled state of the TimePicker.

Hour and minute

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

Interval option

Show stepped options by hourStep minuteStep secondStep.

Addon

Render addon contents to time picker panel's bottom.

12 hours

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

Range Picker

Use time range picker with RangePicker.

Bordered-less

Bordered-less style component.

API

PropertyDescriptionTypeDefault
allowClear
Whether allow clearing text
boolean
true
autoFocus
If get focus when component mounted
boolean
false
bordered
Whether has border style
boolean
true
className
The className of picker
string
-
clearText
The clear tooltip of icon
string
clear
defaultValue
To set default time
moment
-
disabled
Determine whether the TimePicker is disabled
boolean
false
-
disabledHours
To specify the hours that cannot be selected
function()
-
disabledMinutes
To specify the minutes that cannot be selected
function(selectedHour)
-
disabledSeconds
To specify the seconds that cannot be selected
function(selectedHour, selectedMinute)
-
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
open
Whether to popup panel
boolean
false
placeholder
Display when there's no value
string | [string, string]
Select a time
popupClassName
The className of panel
string
-
popupStyle
The style of panel
CSSProperties
-
secondStep
Interval between seconds in picker
number
1
suffixIcon
The custom suffix icon
ReactNode
-
clearIcon
The custom clear icon
ReactNode
-
use12Hours
Display as 12 hours format, with default format h:mm:ss a
boolean
false
renderExtraFooter
Called from time picker panel to render some addon to its bottom
) => ReactNode
-
value
To set time
moment
-
onChange
A callback function, can be executed when the selected time is changing
function(time: moment, timeString: string): void
-
onOpenChange
A callback function which will be called while panel opening/closing
(open: boolean) => void
-
showNow
Whether to show Now button on panel
boolean
-

Methods

PropertyDescriptionTypeDefault
blur()
Remove focus
focus()
Get focus

RangePicker

PropertyDescriptionTypeDefault
order
Order start and end time
boolean
true