logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.3.2
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • 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
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 { TimePicker } from 'antd';
import React from 'react';

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
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[];
};

FAQ

  • How to use TimePicker with customize date library like dayjs