Using time pickers

Like date pickers, time pickers help users input time values. Also like date pickers, time pickers in Material-UI applications are derived from the TextInput components.

How to do it...

Let's create the same abstraction that's used in the Using date pickers section, only this time, it's meant for the time pickers:

import React, { Fragment, useState } from 'react';

import { makeStyles } from '@material-ui/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles(theme => ({
  textField: { margin: theme.spacing(1) }
}));

const TimePicker = ({ time, ...props }) => (
  <TextField
    value={time}
    type="time"
    InputLabelProps...