Material-UI pickers
v3.2.9

Time Picker#

Time pickers use a dialog to select a single time (in the hours:minutes format). The selected time is indicated by the filled circle at the end of the clock hand.

Basic usage#

A time picker should adjust to a user’s preferred time setting, i.e. the 12-hour or 24-hour format.

import React, { Fragment, useState } from "react";
import { TimePicker } from "@material-ui/pickers";

function BasicTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <TimePicker autoOk label="12 hours" value={selectedDate} onChange={handleDateChange} />

      <TimePicker
        clearable
        ampm={false}
        label="24 hours"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <TimePicker
        showTodayButton
        todayLabel="now"
        label="Step = 5"
        value={selectedDate}
        minutesStep={5}
        onChange={handleDateChange}
      />
    </Fragment>
  );
}

export default BasicTimePicker;

Keyboard input#

import React, { useState } from "react";
import { KeyboardTimePicker } from "@material-ui/pickers";

function KeyboardTimePickerExample() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <KeyboardTimePicker
      label="Masked timepicker"
      placeholder="08:00 AM"
      mask="__:__ _M"
      value={selectedDate}
      onChange={date => handleDateChange(date)}
    />
  );
}

export default KeyboardTimePickerExample;

Inline mode#

import React, { Fragment, useState } from "react";
import { TimePicker, KeyboardTimePicker } from "@material-ui/pickers";

function InlineTimePickerDemo() {
  const [selectedDate, handleDateChange] = useState("2018-01-01T00:00:00.000Z");

  return (
    <Fragment>
      <TimePicker
        variant="inline"
        label="Inline mode"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <KeyboardTimePicker
        ampm={false}
        variant="inline"
        label="With keyboard"
        value={selectedDate}
        onChange={handleDateChange}
      />
    </Fragment>
  );
}

export default InlineTimePickerDemo;

Static mode#

It is possible to render any picker inline. This will be really helpful to build custom popover/modal containers. For that use variant="static".

import React, { useState } from "react";
import { TimePicker } from "@material-ui/pickers";

const StaticTimePicker = () => {
  const [date, changeDate] = useState(new Date());

  // prettier-ignore
  return (
    <>
      <TimePicker
        autoOk
        variant="static"
        openTo="hours"
        value={date}
        onChange={changeDate}
      />

      <TimePicker
        autoOk
        ampm={false}
        variant="static"
        orientation="landscape"
        openTo="minutes"
        value={date}
        onChange={changeDate}
      />
    </>
  );
};

export default StaticTimePicker;

:

123456789101112

:

000510152025303540455055

Seconds#

Seconds input can be used for selection of a precise time point.

import React, { Fragment, useState } from "react";
import { TimePicker } from "@material-ui/pickers";

function SecondsTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <TimePicker
        ampm={false}
        openTo="hours"
        views={["hours", "minutes", "seconds"]}
        format="HH:mm:ss"
        label="With seconds"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <TimePicker
        ampm={false}
        openTo="minutes"
        views={["minutes", "seconds"]}
        format="mm:ss"
        label="Minutes and seconds"
        value={selectedDate}
        onChange={handleDateChange}
      />
    </Fragment>
  );
}

export default SecondsTimePicker;

Components API#