Material UI — Date and Time Pickers and Radio Buttons

Photo by Hermes Rivera on Unsplash

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add date and time pickers and radio buttons with Material UI.

Date / Time Pickers

We can add a native date picker with the type set to date .

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";
export default function App() {
  return (
    <div>
      <form noValidate>
        <TextField
          id="date"
          label="Birthday"
          type="date"
          defaultValue="2020-05-26"
          InputLabelProps={{
            shrink: true
          }}
        />
      </form>
    </div>
  );
}

to add a date picker.

We used the TextField component to add the text field.

defaultValue is used to set the default value of the picker.

Date and Time Pickers

If we want to add a picker for both the date and time, we can set the type

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";
export default function App() {
  return (
    <div>
      <form noValidate>
        <TextField
          id="date"
          label="Birthday"
          type="datetime-local"
          defaultValue="2021-05-26T10:30"
          InputLabelProps={{
            shrink: true
          }}
        />
      </form>
    </div>
  );
}

We set the type to datetime-local to show a native date and time picker.

Time Pickers

To add a time picker only, we can set the type of the TextField to time .

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";
export default function App() {
  return (
    <div>
      <form noValidate>
        <TextField
          id="time"
          label="Clock"
          type="time"…