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);
}

ReactDOM.render(
  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
  mountNode
);

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';

ReactDOM.render(
  <div>
    <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" />
  </div>
, mountNode);

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';

ReactDOM.render(
  <TimePicker defaultValue={moment('12:08', format)} format={format} />
, mountNode);

Addon

Render addon contents to timepicker 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}
        addon={() => (
          <Button size="small" type="primary" onClick={this.handleClose}>
            Ok
          </Button>
        )}
      />
    );
  }
}

ReactDOM.render(<TimePickerAddonDemo />, mountNode);

Under Control

value and onChange should be used together,

import { TimePicker } from 'antd';

class Demo extends React.Component {
  state = {
    value: null,
  };

  onChange = (time) => {
    console.log(time);
    this.setState({ value: time });
  }

  render() {
    return <TimePicker value={this.state.value} onChange={this.onChange} />;
  }
}

ReactDOM.render(<Demo />, mountNode);

disabled

A disabled state of the TimePicker.

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

ReactDOM.render(
  <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />
, mountNode);

Disabled Time

Make part of time unselectable by disabledHours disabledMinutes disabledSeconds, and we even can hide those unselectable options by hideDisabledOptions.

import { TimePicker } from 'antd';

function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function disabledHours() {
  const hours = range(0, 60);
  hours.splice(20, 4);
  return hours;
}

function disabledMinutes(h) {
  if (h === 20) {
    return range(0, 31);
  } else if (h === 23) {
    return range(30, 60);
  }
  return [];
}

ReactDOM.render(
  <div>
    <TimePicker
      disabledHours={disabledHours}
      disabledMinutes={disabledMinutes}
      placeholder="Just Disabled"
    />
    <TimePicker
      disabledHours={disabledHours}
      disabledMinutes={disabledMinutes}
      hideDisabledOptions
      placeholder="Hide Directly"
    />
  </div>
, mountNode);

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);
}

ReactDOM.render(
  <div>
    <TimePicker use12Hours onChange={onChange} />
    <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} />
    <TimePicker use12Hours format="h:mm a" onChange={onChange} />
  </div>
, mountNode);

API#

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

Property	Description	Type	Default
defaultValue	to set default time	moment	-
value	to set time	moment	-
defaultOpenValue	to highlight values in panel when there is no selected value	moment	moment()
open	whether to popup panel	boolean	false
onOpenChange	a callback function which will be called while panel opening/closing	(open: boolean): void	-
placeholder	display when there's no value	string	"Select a time"
onChange	a callback function, can be executed when the selected time is changing	function(time: moment, timeString: string): void	-
format	to set the time format	string	"HH:mm:ss"
disabled	determine whether the TimePicker is disabled	boolean	false
disabledHours	to specify the hours that cannot be selected	function()	-
disabledMinutes	to specify the minutes that cannot be selected	function(selectedHour)	-
disabledSeconds	to specify the seconds that cannot be selected	function(selectedHour, selectedMinute)	-
hideDisabledOptions	hide the options that can not be selected	boolean	false
getPopupContainer	to set the container of the floating layer, while the default is to create a div element in body	function(trigger)	-
addon	called from timepicker panel to render some addon to its bottom	function	-
use12Hours	display as 12 hours format, with default format `h:mm:ss a`	boolean	false
className	className of picker	string	''
popupClassName	className of panel	string	''

Components

TimePicker

Examples

API#