Basic
Under Control
Three Sizes
disabled
Hour and minute
interval option
Addon
12 hours
Time Range Picker
Bordered-less
Status
API

TimePicker

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

Examples

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

import { TimePicker } from 'antd';
import moment from 'moment';

function onChange(time, timeString) {
  console.log(time, timeString);
}

export default () => (
  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
);

Three Sizes

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

import { TimePicker } from 'antd';
import moment from 'moment';

export default () => (
  <>
    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
  </>
);

Hour and minute

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

import { TimePicker } from 'antd';
import moment from 'moment';

const format = 'HH:mm';

export default () => <TimePicker defaultValue={moment('12:08', format)} format={format} />;

Addon

Render addon contents to time picker panel's bottom.

import { TimePicker, Button } from 'antd';

class TimePickerAddonDemo extends React.Component {
  state = { open: false };

  handleOpenChange = open => {
    this.setState({ open });
  };

  handleClose = () => this.setState({ open: false });

  render() {
    return (
      <TimePicker
        open={this.state.open}
        onOpenChange={this.handleOpenChange}
        renderExtraFooter={() => (
          <Button size="small" type="primary" onClick={this.handleClose}>
            OK
          </Button>
        )}
      />
    );
  }
}

export default () => <TimePickerAddonDemo />;

Time Range Picker

Use time range picker with TimePicker.RangePicker.

import { TimePicker } from 'antd';

export default () => <TimePicker.RangePicker />;

Status

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

TypeScript
JavaScript
import { TimePicker, Space } from 'antd';

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

export default () => <Status />;

4.19.0

Under Control

value and onChange should be used together,

import React, { useState } from 'react';
import { TimePicker } from 'antd';

const Demo = () => {
  const [value, setValue] = useState(null);

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

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

export default Demo;

disabled

A disabled state of the TimePicker.

import { TimePicker } from 'antd';
import moment from 'moment';

export default () => <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />;

interval option

Show stepped options by hourStep minuteStep secondStep.

import { TimePicker } from 'antd';

export default () => <TimePicker minuteStep={15} secondStep={10} />;

12 hours

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

import { TimePicker } from 'antd';

function onChange(time, timeString) {
  console.log(time, timeString);
}

export default () => (
  <>
    <TimePicker use12Hours onChange={onChange} />
    <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} style={{ width: 140 }} />
    <TimePicker use12Hours format="h:mm a" onChange={onChange} />
  </>
);

Bordered-less

Bordered-less style component.

import { TimePicker } from 'antd';

const { RangePicker } = TimePicker;

export default () => (
  <>
    <TimePicker bordered={false} />
    <RangePicker bordered={false} />
  </>
);

API#

import moment from 'moment';

<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;

Property	Description	Type	Default	Version
allowClear	Whether allow clearing text	boolean	true
autoFocus	If get focus when component mounted	boolean	false
bordered	Whether has border style	boolean	true
className	The className of picker	string	-
clearIcon	The custom clear icon	ReactNode	-
clearText	The clear tooltip of icon	string	clear
defaultValue	To set default time	moment	-
disabled	Determine whether the TimePicker is disabled	boolean	false
disabledTime	To specify the time that cannot be selected	DisabledTime	-	4.19.0
format	To set the time format	string	`HH:mm:ss`
getPopupContainer	To set the container of the floating layer, while the default is to create a div element in body	function(trigger)	-
hideDisabledOptions	Whether hide the options that can not be selected	boolean	false
hourStep	Interval between hours in picker	number	1
inputReadOnly	Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices)	boolean	false
minuteStep	Interval between minutes in picker	number	1
open	Whether to popup panel	boolean	false
placeholder	Display when there's no value	string \| [string, string]	`Select a time`
placement	The position where the selection box pops up	`bottomLeft` `bottomRight` `topLeft` `topRight`	bottomLeft
popupClassName	The className of panel	string	-
popupStyle	The style of panel	CSSProperties	-
renderExtraFooter	Called from time picker panel to render some addon to its bottom	() => ReactNode	-
secondStep	Interval between seconds in picker	number	1
showNow	Whether to show `Now` button on panel	boolean	-	4.4.0
status	Set validation status	'error' \| 'warning' \| 'success' \| 'validating'	-	4.19.0
suffixIcon	The custom suffix icon	ReactNode	-
use12Hours	Display as 12 hours format, with default format `h:mm:ss a`	boolean	false
value	To set time	moment	-
onChange	A callback function, can be executed when the selected time is changing	function(time: moment, timeString: string): void	-
onOpenChange	A callback function which will be called while panel opening/closing	(open: boolean) => void	-
onSelect	A callback function, executes when a value is selected	function(time: moment): void	-

DisabledTime#

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

Methods#

Name	Description	Version
blur()	Remove focus
focus()	Get focus

RangePicker#

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

Property	Description	Type	Default	Version
disabledTime	To specify the time that cannot be selected	RangeDisabledTime	-	4.19.0
order	Order start and end time	boolean	true	4.1.0

RangeDisabledTime#

type RangeDisabledTime = (
  now: Moment,
  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