Sometimes, we want to add the outline variant of the date picker with React Material UI.

In this article, we’ll look at how to add the outline variant of the date picker with React Material UI.

How to add the outline variant of the date picker with React Material UI?

To add the outline variant of the date picker with React Material UI, we set the inputVariant prop of the KeyboardDatePicker to 'outlined'.

For instance, we write:

import * as React from "react";
import "date-fns";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";

export default function App() {
  const [date, setDate] = React.useState(new Date());

  return (
    <div>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          margin="normal"
          id="date-picker-dialog"
          label="Date picker dialog"
          format="MM/dd/yyyy"
          value={date}
          onChange={(d) => setDate(d)}
          inputVariant="outlined"
        />
      </MuiPickersUtilsProvider>
    </div>
  );
}

First, we wrap MuiPickersUtilsProvider around the KeyboardDatePicker to make the date picker work.

We add a KeyboardDatePicker with the type prop set to 'date' to add a date picker.

Next, we set the inputVariant prop of the KeyboardDatePicker to 'outlined' to make the input show the border.

And we set the value and onChange props to let us get and set the selected date value respectively.

Conclusion

To add the outline variant of the date picker with React Material UI, we set the variant prop of the TextField to 'outlined'.