ContextQMD
Back to Ant Design

TimePicker

components/time-picker/index.en-US.md

6.4.47.3 KB
Original Source

When To Use

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

Examples

<!-- prettier-ignore -->

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/value.tsx">Under Control</code> <code src="./demo/size.tsx">Three Sizes</code> <code src="./demo/need-confirm.tsx" version="5.14.0">Need Confirm</code> <code src="./demo/disabled.tsx">disabled</code> <code src="./demo/hide-column.tsx">Hour and minute</code> <code src="./demo/interval-options.tsx">interval option</code> <code src="./demo/addon.tsx">Addon</code> <code src="./demo/12hours.tsx">12 hours</code> <code src="./demo/change-on-scroll.tsx" version="5.14.0">Change on scroll</code> <code src="./demo/colored-popup.tsx" debug>Colored Popup</code> <code src="./demo/range-picker.tsx">Time Range Picker</code> <code src="./demo/variant.tsx" version="5.13.0">Variants</code> <code src="./demo/status.tsx">Status</code> <code src="./demo/suffix.tsx">Prefix and Suffix</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>

API

Common props ref：Common props

jsx
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat'

dayjs.extend(customParseFormat)

<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
PropertyDescriptionTypeDefaultVersionGlobal Config
allowClearCustomize clear iconboolean | { clearIcon?: ReactNode }true5.8.0: Support object type6.4.0
addonCalled from time picker panel to render an addon to its bottom, please use renderExtraFooter instead() => ReactNode--×
cellRenderCustom 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×
changeOnScrollTrigger selection when scroll the columnbooleanfalse5.14.0×
classNamesCustomize class for each semantic structure inside the component. Supports object or function.Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>-5.25.0
defaultValueTo set default timedayjs-×
disabledDetermine whether the TimePicker is disabledbooleanfalse×
disabledTimeTo specify the time that cannot be selectedDisabledTime-4.19.0×
formatTo set the time formatstringHH:mm:ss×
getPopupContainerTo set the container of the floating layer, while the default is to create a div element in bodyfunction(trigger)-×
hideDisabledOptionsWhether hide the options that can not be selectedbooleanfalse×
hourStepInterval between hours in pickernumber1×
inputReadOnlySet the readonly attribute of the input tag (avoids virtual keyboard on touch devices)booleanfalse×
minuteStepInterval between minutes in pickernumber1×
needConfirmNeed click confirm button to trigger value changeboolean-5.14.0×
openWhether to popup panelbooleanfalse×
placeholderDisplay when there's no valuestring | [string, string]Select a time×
placementThe position where the selection box pops upbottomLeft bottomRight topLeft topRightbottomLeft×
popupClassNameThe className of panel, please use classNames.popup insteadstring-×
popupStyleThe style of panel, please use styles.popup insteadCSSProperties-×
prefixThe custom prefixReactNode-5.22.0×
previewValueWhen the user selects the time hover option, the value of the input field undergoes a temporary changefalse | hoverhover6.0.0×
renderExtraFooterCalled from time picker panel to render some addon to its bottom() => ReactNode-×
secondStepInterval between seconds in pickernumber1×
showNowWhether to show Now button on panelboolean-4.4.0×
sizeTo determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32pxlarge | medium | small-×
statusSet validation status'error' | 'warning' | 'success' | 'validating'-4.19.0×
stylesCustomize inline style for each semantic structure inside the component. Supports object or function.Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>-5.25.0
suffixIconThe custom suffix iconReactNode-6.3.0
use12HoursDisplay as 12 hours format, with default format h:mm:ss abooleanfalse×
valueTo set timedayjs-×
variantVariants of pickeroutlined | borderless | filled | underlinedoutlined5.13.0 | underlined: 5.24.05.19.0
onCalendarChangeCallback function, can be executed when the start time or the end time of the range is changing. info argument is added in 4.4.0function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range:start|end })-×
onChangeA callback function, can be executed when the selected time is changingfunction(time: dayjs, timeString: string): void-×
onOpenChangeA callback function which will be called while panel opening/closing(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[];
};

Note: disabledMilliseconds is added in 5.14.0.

Methods

NameDescriptionVersion
blur()Remove focus
focus()Get focus

RangePicker

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

PropertyDescriptionTypeDefaultVersion
disabledTimeTo specify the time that cannot be selectedRangeDisabledTime-4.19.0
orderOrder start and end timebooleantrue4.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

<code src="./demo/_semantic.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="DatePicker"></ComponentTokenTable>

FAQ