You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

3.3 KiB

category type title
Components Data Entry TimePicker

To select/input a time.

When To Use


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

API


import moment from 'moment';

<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
Property Description Type Default Version
allowClear allow clearing text boolean true
autoFocus get focus when component mounted boolean false
bordered whether has border style boolean true
className className of picker string ''
clearText 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 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 "Select a time"
popupClassName className of panel string -
popupStyle 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 -

Methods

Name Description Version
blur() remove focus
focus() get focus

RangePicker

Same props from RangePicker of DatePicker. And includes additional props:

Property Description Type Default Version
order Order start and end time boolean true 4.1.0

FAQ