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

Show stepped options by hourStep minuteStep secondStep.

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

ReactDOM.render(
  <TimePicker minuteStep={15} secondStep={10} />
, 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
addoncalled from timepicker panel to render some addon to its bottomfunction-
allowEmptyallow clearing textbooleantrue
autoFocusget focus when component mountedbooleanfalse
classNameclassName of pickerstring''
clearTextclear tooltip of iconstringclear
defaultOpenValuedefault open panel value, used to set utcOffset,locale if value/defaultValue absentmomentmoment()
defaultValueto set default timemoment-
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)-
formatto set the time formatstring"HH:mm:ss"
getPopupContainerto set the container of the floating layer, while the default is to create a div element in bodyfunction(trigger)-
hideDisabledOptionshide the options that can not be selectedbooleanfalse
hourStepinterval between hours in pickernumber1
minuteStepinterval between minutes in pickernumber1
openwhether to popup panelbooleanfalse
placeholderdisplay when there's no valuestring"Select a time"
popupClassNameclassName of panelstring''
secondStepinterval between seconds in pickernumber1
use12Hoursdisplay as 12 hours format, with default format h:mm:ss abooleanfalse
valueto set timemoment-
onChangea callback function, can be executed when the selected time is changingfunction(time: moment, timeString: string): void-
onOpenChangea callback function which will be called while panel opening/closing(open: boolean): void-

Methods#

NameDescription
blur()remove focus
focus()get focus