1import React, { Fragment, useState } from "react";
2import { TextField } from "@material-ui/core";
3import { MobileDatePicker, DesktopDatePicker, DatePicker } from "@material-ui/pickers";
4
5function DatePickersVariants(props) {
6  const [selectedDate, handleDateChange] = useState(new Date());
7
8  return (
9    <Fragment>
10      <MobileDatePicker
11        clearable
12        label="For mobile"
13        inputFormat="MM/dd/yyyy"
14        toolbarPlaceholder="Enter Date"
15        value={selectedDate}
16        onChange={date => handleDateChange(date)}
17        renderInput={props => <TextField {...props} />}
18      />
19
20      <DesktopDatePicker
21        autoOk
22        label="For desktop"
23        minDate={new Date("2017-01-01")}
24        value={selectedDate}
25        onChange={date => handleDateChange(date)}
26        renderInput={props => <TextField {...props} />}
27      />
28
29      <DatePicker
30        disableFuture
31        label="Responsive"
32        openTo="year"
33        views={["year", "month", "date"]}
34        value={selectedDate}
35        onChange={date => handleDateChange(date)}
36        renderInput={props => <TextField {...props} />}
37      />
38    </Fragment>
39  );
40}
41
42export default DatePickersVariants;