Input · TimePicker
Users can easily select a compliant, formatted point of time using the time selector.


How to import

Basic Usage

Click TimePicker, and then you can select or enter a time in the floating layer.

With an Embedded Label

Controlled Component

When using value And not. defaultValue When used as a controlled component.value and onChange It needs to be used in conjunction.

Different Format

The columns in the TimePicker float will follow format Change, when omitted format At some point, the corresponding column in the floating layer will also disappear.
NOTE: format Follow the date-fns format Format.

Disable Time Selection

Set Step Length

Available Hour Step, Minute Step, Second Step Show the optional minutes and seconds by step.

12-hour System

12-hour time selector, default format for h:mm:ss a, an incoming format The format must be in dateFns date formatWithin range.
For example, the default 12-hour format string is:a h:mm:ss, if passed in A h:mm:ss This will result in an inability to format correctly.

Time Range

Version: > = 0.23.0
Pass type = "timeRange" to enable time range selection.

Custom Trigger

Version: >=0.34.0
By default we use the Input component as the trigger for the DatePicker component. You can customize this trigger by passing the triggerRender method.

TimeZone Config

Semi All configuration about time zone is converged in ConfigProvider

API Reference

autoAdjustOverflowWhether the floating layer automatically adjusts its direction when it is blockedbooleantrue0.34.0
autoFocusAutomatic access to focusbooleanfalse
classNameOuter style namestring
clearTextClear button prompt copystringClear
defaultOpenWhether the panel is open by defaultboolean0.19.0
defaultValueDefault timeDate|timeStamp|string (array when type = "timeRange")
disabledDisable all operationsbooleanfalse
disabledHoursProhibited selection of partial hour options() => number []
disabledMinutesProhibited to select some minute options(selectedHour: number) => number[]
disabledSecondsUnable to select partial second option(selectedHour: number, selectedMinute: number) => number[]
focusOnOpenWhether to open the panel and focus the input box when mountingbooleanfalse
formatTime format of presentationstring"HH: mm: ss."
getPopupContainerSpecifies the container and the floating layer will be rendered into the element, you need to set 'position: relative`() => HTMLElement() => document.body
hideDisabledOptionsHide the option of forbidden selectionbooleanfalse
hourStepHour option intervalnumber1
inputReadOnlySet the input box to read-only (avoid opening a virtual keyboard on a mobile device)booleanfalse
insetLabelPrefix label, lower priority than prefixstring|ReactNode
minuteStepMinute option intervalnumber1
motionWhether to display the pop-up layer animationbooleantrue
openControlled property of whether the panel is openboolean
panelFooterAddon at the bottom of the panelReactNode|string
panelHeaderPanel head addonReactNode|string
placeholderWhat's displayed when it's not worth it.string"Select time"
popupClassNamePop-up class namestring''
popupStylePop-up layer style objectobject-
positionFloating positionstringtype="timeRange" => "bottom"
type="time" => "bottomLeft"
prefixClsPrefix contentstring|ReactNode
preventScrollIndicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the userboolean
rangeSeparatortime range delimiterstring"~"
scrollItemPropsThe props passed through to ScrollItem. The optional values are the same as ScrollList#APIobject0.31.0
secondStepSecond option intervalnumber1
showClearDo you show the clear button? v>=0.35.0booleantrue
sizeSize of input box, one of 'default', 'small' and 'large'string'default'
triggerRenderCustom trigger rendering method({ placeholder: string }) => ReactNode0.34.0
use12HoursUsing a 12-hour system, format default to h: mm: ssa when truebooleanfalse
valueCurrent timeDate|timeStamp|string (array when type = "timeRange")
onBlurCallback when focus is lost(e: domEvent) => void() => {}1.0.0
onChangeA callback in time.(time: Date|Date[], timeString: string|string[]) => void
onChangeWithDateFirstSet the order of parameter in onChange, true: (Date, string); false: (string, Date)booleantrue2.4.0
onFocusCallback when focus is obtained(e: domEvent) => void() => {}1.0.0
onOpenChangeA callback when the panel is on / off(isOpen: boolean) => void


blur()Remove focus
focus()Get the focus

Content Guidelines

  • The time selector includes at least hours and minutes, such as: 11:30, which can be adapted to 12-hour or 24-hour format during localization
  • When 12-hour clock is selected, it needs to be used together with AM/PM

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED