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>