logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.9.2
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Under Control
Three Sizes
disabled
Hour and minute
interval option
Addon
12 hours
Time Range Picker
Bordered-less
Status
API
Methods
RangePicker
RangeDisabledTime
Design Token
FAQ

TimePicker

  • SwitchTransfer

    Resources

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    To select/input a time.

    When To Use

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

    Examples

    API


    Common props ref:Common props

    import dayjs from 'dayjs';
    import customParseFormat from 'dayjs/plugin/customParseFormat'
    dayjs.extend(customParseFormat)
    <TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
    PropertyDescriptionTypeDefaultVersion
    allowClearCustomize clear iconboolean | { clearIcon?: ReactNode }true5.8.0: Support object type
    autoFocusIf get focus when component mountedbooleanfalse
    borderedWhether has border stylebooleantrue
    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
    changeOnBlurTrigger change when blur. e.g. datetime picker no need click confirm buttonbooleanfalse5.5.0
    classNameThe className of pickerstring-
    clearIconThe custom clear iconReactNode-
    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
    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 panelstring-
    popupStyleThe style of panelCSSProperties-
    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 | middle | small-
    statusSet validation status'error' | 'warning' | 'success' | 'validating'-4.19.0
    suffixIconThe custom suffix iconReactNode-
    use12HoursDisplay as 12 hours format, with default format h:mm:ss abooleanfalse
    valueTo set timedayjs-
    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-
    onSelectA callback function, executes when a value is selectedfunction(time: dayjs): void-

    DisabledTime

    type DisabledTime = (now: Dayjs) => {
    disabledHours?: () => number[];
    disabledMinutes?: (selectedHour: number) => number[];
    disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
    };

    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

    type RangeDisabledTime = (
    now: Dayjs,
    type = 'start' | 'end',
    ) => {
    disabledHours?: () => number[];
    disabledMinutes?: (selectedHour: number) => number[];
    disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
    };

    Design Token

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    activeBorderColorActive border colorstring#4096ff
    activeShadowBox-shadow when activestring0 0 0 2px rgba(5, 145, 255, 0.1)
    addonBgBackground color of addonstringrgba(0, 0, 0, 0.02)
    cellActiveWithRangeBgBackground color of cell in rangestring#e6f4ff
    cellBgDisabledBackground color of disabled cellstringrgba(0, 0, 0, 0.04)
    cellHeightHeight of cellnumber24
    cellHoverBgBackground color of cell hover statestringrgba(0, 0, 0, 0.04)
    cellHoverWithRangeBgBackground color of hovered cell in rangestring#c8dfff
    cellRangeBorderColorBorder color of cell in range when pickingstring#7cb3ff
    cellWidthWidth of cellnumber36
    errorActiveShadowBox-shadow when active in error statusstring0 0 0 2px rgba(255, 38, 5, 0.06)
    hoverBorderColorHover border colorstring#4096ff
    paddingBlockVertical padding of inputnumber4
    paddingBlockLGVertical padding of large inputnumber7
    paddingBlockSMVertical padding of small inputnumber0
    paddingInlineHorizontal padding of inputnumber11
    paddingInlineLGHorizontal padding of large inputnumber11
    paddingInlineSMHorizontal padding of small inputnumber7
    presetsMaxWidthMax width of preset areanumber200
    presetsWidthWidth of preset areanumber120
    textHeightHeight of cell textnumber40
    timeCellHeightHeight of time cellnumber28
    timeColumnHeightHeight of time columnnumber224
    timeColumnWidthWidth of time columnnumber56
    warningActiveShadowBox-shadow when active in warning statusstring0 0 0 2px rgba(255, 215, 5, 0.1)
    withoutTimeCellHeightHeight of decade/year/quarter/month/week cellnumber66
    zIndexPopupz-index of popupnumber1050

    Global TokenHow to use?

    FAQ

    • How to use TimePicker with customize date library like dayjs
    Basic

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

    expand codeexpand code
    Three Sizes

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

    expand codeexpand code
    Hour and minute

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

    expand codeexpand code
    Addon

    Render addon contents to time picker panel's bottom.

    expand codeexpand code
    Time Range Picker

    Use time range picker with TimePicker.RangePicker.

    expand codeexpand code
    Status

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

    expand codeexpand code
    Under Control

    value and onChange should be used together,

    expand codeexpand code
    disabled

    A disabled state of the TimePicker.

    expand codeexpand code
    interval option

    Show stepped options by hourStep minuteStep secondStep.

    expand codeexpand code
    12 hours

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

    expand codeexpand code
    Bordered-less

    Bordered-less style component.

    expand codeexpand code