TimePicker

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
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.

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,
);
Hour and minute

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

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

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

Use time range picker with RangePicker.

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

const { RangePicker } = TimePicker;

ReactDOM.render(
  <div>
    <RangePicker />
  </div>,
  mountNode,
);
Under Control

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

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

Show stepped options by hourStep minuteStep secondStep.

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

ReactDOM.render(<TimePicker minuteStep={15} secondStep={10} />, mountNode);
12 hours

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} style={{ width: 140 }} />
    <TimePicker use12Hours format="h:mm a" onChange={onChange} />
  </div>,
  mountNode,
);

API#

import moment from 'moment';
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
PropertyDescriptionTypeDefaultVersion
allowClearallow clearing textbooleantrue
autoFocusget focus when component mountedbooleanfalse
borderedwhether has border stylebooleantrue
classNameclassName of pickerstring''
clearTextclear tooltip of iconstringclear
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
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"Select a time"
popupClassNameclassName of panelstring''
popupStylestyle of panelobject-
secondStepinterval between seconds in pickernumber1
suffixIconThe custom suffix iconReactNode-
clearIconThe custom clear iconReactNode-
use12Hoursdisplay as 12 hours format, with default format h:mm:ss abooleanfalse
renderExtraFootercalled from time picker panel to render some addon to its bottom() => ReactNode-
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#

NameDescriptionVersion
blur()remove focus
focus()get focus

RangePicker#

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

PropertyDescriptionTypeDefaultVersion
orderOrder start and end timebooleantrue4.1.0

FAQ#

TransferUpload