date range picker react material-ui code example

Example: date picker in material ui

const [effectiveSelectedDate, setEffSelectedDate] = useState();
const handleEffDateChange = (date,name) =>{
        setEffSelectedDate(date);
    }
<MuiPickersUtilsProvider utils={DateFnsUtils}>
           <KeyboardDatePicker
               fullWidth
               variant='inline'
               placeholder='yyyy-MM-dd'
               format='yyyy-MM-dd'
               margin='normal'
               id='date-picker-inline'
               name='effectiveDate'
               value={effectiveSelectedDate}
               onChange={handleEffDateChange}
               KeyboardButtonProps={{
                  'aria-label': 'change date',
                   }}
                       />
  </MuiPickersUtilsProvider>

Tags:

Misc Example