material ui datepicke

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;

1const [effectiveSelectedDate, setEffSelectedDate] = useState();
2const handleEffDateChange = (date,name) =>{
3        setEffSelectedDate(date);
4    }
5<MuiPickersUtilsProvider utils={DateFnsUtils}>
6           <KeyboardDatePicker
7               fullWidth
8               variant='inline'
9               placeholder='yyyy-MM-dd'
10               format='yyyy-MM-dd'
11               margin='normal'
12               id='date-picker-inline'
13               name='effectiveDate'
14               value={effectiveSelectedDate}
15               onChange={handleEffDateChange}
16               KeyboardButtonProps={{
17                  'aria-label': 'change date',
18                   }}
19                       />
20  </MuiPickersUtilsProvider>