How it works...

The structure of the TimePicker component is very similar to the DatePicker component from the previous recipe. The main difference is that TimePicker doesn't support the Date instances because it only deals with time. Because there's no date piece, using the Date instances to express only time is a lot more difficult than expressing only the date:

const TimePicker = ({ time, ...props }) => (  <TextField    value={time}    type="time"    InputLabelProps={{      shrink: true    }}    inputProps={{      step: 300    }}    {...props}  />);

The TimePicker component sets the same properties on TextField as the DatePicker component. Additionally, the step value of 300 makes the minute portion of the time move by five minutes at a time.

Get React Material-UI Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.