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.

expand codeexpand code
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
);

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

expand codeexpand code
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);

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

expand codeexpand code
import { TimePicker } from 'antd';
import moment from 'moment';

const format = 'HH:mm';

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

Render addon contents to timepicker panel's bottom.

expand codeexpand code
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);

value and onChange should be used together,

expand codeexpand code
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);

A disabled state of the TimePicker.

expand codeexpand code
import { TimePicker } from 'antd';
import moment from 'moment';

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

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

expand codeexpand code
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);

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

expand codeexpand code
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')} />
PropertyDescriptionTypeDefault
defaultValueto set default timemoment-
valueto set timemoment-
defaultOpenValueto highlight values in panel when there is no selected valuemomentmoment()
openwhether to popup panelbooleanfalse
onOpenChangea callback function which will be called while panel opening/closing(open: boolean): void-
placeholderdisplay when there's no valuestring"Select a time"
onChangea callback function, can be executed when the selected time is changingfunction(time: moment, timeString: string): void-
formatto set the time formatstring"HH:mm:ss"
disableddetermine whether the TimePicker is disabledbooleanfalse
disabledHoursto specify the hours that cannot be selectedfunction()-
disabledMinutesto specify the minutes that cannot be selectedfunction(selectedHour)-
disabledSecondsto specify the seconds that cannot be selectedfunction(selectedHour, selectedMinute)-
hideDisabledOptionshide the options that can not be selectedbooleanfalse
getPopupContainerto set the container of the floating layer, while the default is to create a div element in bodyfunction(trigger)-
addoncalled from timepicker panel to render some addon to its bottomfunction-
use12Hoursdisplay as 12 hours format, with default format h:mm:ss abooleanfalse
classNameclassName of pickerstring''
popupClassNameclassName of panelstring''