logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.5.1
  • Components Overview
  • General
    • Button
    • 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
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
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

Basic

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { TimePicker } from 'antd';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);

const onChange = (time: Dayjs, timeString: string) => {
  console.log(time, timeString);
};

const App: React.FC = () => (
  <TimePicker onChange={onChange} defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')} />
);

export default App;
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
TypeScript
JavaScript
import React from 'react';
import { Space, TimePicker } from 'antd';
import dayjs from 'dayjs';

const App: React.FC = () => (
  <Space wrap>
    <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} size="large" />
    <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} />
    <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} size="small" />
  </Space>
);

export default App;
Hour and minute

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { TimePicker } from 'antd';
import dayjs from 'dayjs';

const format = 'HH:mm';

const App: React.FC = () => <TimePicker defaultValue={dayjs('12:08', format)} format={format} />;

export default App;
Addon

Render addon contents to time picker panel's bottom.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { Button, TimePicker } from 'antd';

const App: React.FC = () => {
  const [open, setOpen] = useState(false);

  return (
    <TimePicker
      open={open}
      onOpenChange={setOpen}
      renderExtraFooter={() => (
        <Button size="small" type="primary" onClick={() => setOpen(false)}>
          OK
        </Button>
      )}
    />
  );
};

export default App;
Time Range Picker

Use time range picker with TimePicker.RangePicker.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { TimePicker } from 'antd';

const App: React.FC = () => <TimePicker.RangePicker />;

export default App;
Status

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Space, TimePicker } from 'antd';

const App: React.FC = () => (
  <Space direction="vertical">
    <TimePicker status="error" />
    <TimePicker status="warning" />
    <TimePicker.RangePicker status="error" />
    <TimePicker.RangePicker status="warning" />
  </Space>
);

export default App;
Under Control

value and onChange should be used together,

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { TimePicker } from 'antd';
import type { Dayjs } from 'dayjs';

const App: React.FC = () => {
  const [value, setValue] = useState<Dayjs | null>(null);

  const onChange = (time: Dayjs) => {
    setValue(time);
  };

  return <TimePicker value={value} onChange={onChange} />;
};

export default App;
disabled

A disabled state of the TimePicker.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { TimePicker } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);

const App: React.FC = () => <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} disabled />;

export default App;
interval option

Show stepped options by hourStep minuteStep secondStep.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { TimePicker } from 'antd';

const App: React.FC = () => <TimePicker minuteStep={15} secondStep={10} hourStep={1} />;

export default App;
12 hours

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Space, TimePicker } from 'antd';
import type { Dayjs } from 'dayjs';

const onChange = (time: Dayjs, timeString: string) => {
  console.log(time, timeString);
};

const App: React.FC = () => (
  <Space wrap>
    <TimePicker use12Hours onChange={onChange} />
    <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} />
    <TimePicker use12Hours format="h:mm a" onChange={onChange} />
  </Space>
);

export default App;
Bordered-less

Bordered-less style component.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { TimePicker } from 'antd';

const { RangePicker } = TimePicker;

const App: React.FC = () => (
  <>
    <TimePicker bordered={false} />
    <RangePicker bordered={false} />
  </>
);

export default App;

API


import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
PropertyDescriptionTypeDefaultVersion
allowClearWhether allow clearing textbooleantrue
autoFocusIf get focus when component mountedbooleanfalse
borderedWhether has border stylebooleantrue
changeOnBlurTrigger change when blur. e.g. datetime picker no need click confirm buttonbooleanfalse5.5.0
classNameThe className of pickerstring-
clearIconThe custom clear iconReactNode-
clearTextThe clear tooltip of iconstringclear
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

Global Token

Token NameDescriptionTypeDefault Value
colorBgContainerContainer background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.string#ffffff
colorBgContainerDisabledControl the background color of container in disabled state.stringrgba(0, 0, 0, 0.04)
colorBgElevatedContainer background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc.string#ffffff
colorBorderDefault border color, used to separate different elements, such as: form separator, card separator, etc.string#d9d9d9
colorErrorUsed to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.string#ff4d4f
colorErrorOutlineControl the outline color of input component in error state.stringrgba(255, 38, 5, 0.06)
colorIconWeak action. Such as `allowClear` or Alert close buttonstringrgba(0, 0, 0, 0.45)
colorIconHoverWeak action hover color. Such as `allowClear` or Alert close buttonstringrgba(0, 0, 0, 0.88)
colorLinkControl the color of hyperlink.string#1677ff
colorLinkActiveControl the color of hyperlink when clicked.string#0958d9
colorLinkHoverControl the color of hyperlink when hovering.string#69b1ff
colorPrimaryBrand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.string#1677ff
colorPrimaryBorderThe stroke color under the main color gradient, used on the stroke of components such as Slider.string#91caff
colorPrimaryHoverHover state under the main color gradient.string#4096ff
colorSplitUsed as the color of separator, this color is the same as colorBorderSecondary but with transparency.stringrgba(5, 5, 5, 0.06)
colorTextDefault text color which comply with W3C standards, and this color is also the darkest neutral color.stringrgba(0, 0, 0, 0.88)
colorTextDescriptionControl the font color of text description.stringrgba(0, 0, 0, 0.45)
colorTextDisabledControl the color of text in disabled state.stringrgba(0, 0, 0, 0.25)
colorTextHeadingControl the font color of heading.stringrgba(0, 0, 0, 0.88)
colorTextLightSolidControl the highlight color of text with background color, such as the text in Primary Button components.string#fff
colorTextPlaceholderControl the color of placeholder text.stringrgba(0, 0, 0, 0.25)
colorWarningUsed to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.string#faad14
colorWarningOutlineControl the outline color of input component in warning state.stringrgba(255, 215, 5, 0.1)
borderRadiusBorder radius of base componentsnumber6
borderRadiusLGLG size border radius, used in some large border radius components, such as Card, Modal and other components.number8
borderRadiusOuterOuter border radiusnumber4
borderRadiusSMSM size border radius, used in small size components, such as Button, Input, Select and other input components in small sizenumber4
borderRadiusXSXS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius.number2
boxShadowSecondaryControl the secondary box shadow style of an element.string 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)
controlHeightThe height of the basic controls such as buttons and input boxes in Ant Designnumber32
controlHeightLGLG component heightnumber40
controlHeightSMSM component heightnumber24
controlItemBgActiveControl the background color of control component item when active.string#e6f4ff
controlItemBgHoverControl the background color of control component item when hovering.stringrgba(0, 0, 0, 0.04)
controlOutlineControl the outline color of input component.stringrgba(5, 145, 255, 0.1)
controlOutlineWidthControl the outline width of input component.number2
controlPaddingHorizontalControl the horizontal padding of an element.number12
controlPaddingHorizontalSMControl the horizontal padding of an element with a small-medium size.number8
fontFamilyThe font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSizeThe most widely used font size in the design system, from which the text gradient will be derived.number14
fontSizeLGLarge font sizenumber16
fontWeightStrongControl the font weight of heading components (such as h1, h2, h3) or selected item.number600
lineHeightLine height of text.number1.5714285714285714
lineHeightLGLine height of large text.number1.5
lineTypeBorder style of base componentsstringsolid
lineWidthBorder width of base componentsnumber1
lineWidthBoldThe default line width of the outline class components, such as Button, Input, Select, etc.number2
marginXSControl the margin of an element, with a small size.number8
marginXXSControl the margin of an element, with the smallest size.number4
motionDurationMidMotion speed, medium speed. Used for medium element animation interaction.string0.2s
motionDurationSlowMotion speed, slow speed. Used for large element animation interaction.string0.3s
motionEaseInOutCircPreset motion curve.stringcubic-bezier(0.78, 0.14, 0.15, 0.86)
motionEaseInQuintPreset motion curve.stringcubic-bezier(0.755, 0.05, 0.855, 0.06)
motionEaseOutCircPreset motion curve.stringcubic-bezier(0.08, 0.82, 0.17, 1)
motionEaseOutQuintPreset motion curve.stringcubic-bezier(0.23, 1, 0.32, 1)
paddingControl the padding of the element.number16
paddingSMControl the small padding of the element.number12
paddingXSControl the extra small padding of the element.number8
paddingXXSControl the extra extra small padding of the element.number4
sizePopupArrowThe size of the component arrownumber16
zIndexPopupBaseBase zIndex of component like FloatButton, Affix which can be cover by large popupnumber1000

FAQ

  • How to use TimePicker with customize date library like dayjs