How to Disable today's date using date pickers - material ui

user_12574968 0
Viewed 1845

I'm working on a react project where I'm using material-ui-date-pickers and i want to disable today's date since the project is based on manufacturing products, expiration date of products and billing. Since Manufacturing date and expiration date cannot be same ,I want to disable today's date for expiration date. I see props minDate , maxDate can be used , but is it possible to disable today's date using the same? Below is my code.

      <MuiPickersUtilsProvider utils={MomentUtils}>
            <KeyboardDatePicker
              autoOk={true}
              variant='inline'
              inputVariant='outlined'
              format={dateFormat}
              fullWidth
              name='expirationDate'
              value={expirationDate}
              onChange={ (date) => handleDate(date)}
              placeholder={dateFormat}
              size='small'
              disableFuture={true}
              views={['date', 'month', 'year']}
            />
          </MuiPickersUtilsProvider>
material-ui reactjs datepicker javascript
2 Answers

Yes, this be can done using JavaScript date method and using the props minDate , maxDate.

First declare the new date using

const today = new Date();

and in maxDate prop subtract today's date by 1 to get yesterday's date and give it as maxDate.

maxDate={today.setDate(today.getDate() - 1)}

So your complete code will be

<MuiPickersUtilsProvider utils={MomentUtils}>
            <KeyboardDatePicker
              autoOk={true}
              variant='inline'
              inputVariant='outlined'
              format={dateFormat}
              fullWidth
              name='expirationDate'
              value={expirationDate}
              onChange={ (date) => handleChangeDate(date)}
              placeholder={dateFormat}
              size='small'
              disableFuture={true}
              views={['date', 'month', 'year']}
              maxDate={today.setDate(today.getDate() - 1)}
            />
          </MuiPickersUtilsProvider>
user_134914020

Just add diablePast flag for the KeyboardDatePicker element:

 <MuiPickersUtilsProvider utils={MomentUtils}>
            <KeyboardDatePicker
              autoOk={true}
              diablePast={true}
              variant='inline'
              inputVariant='outlined'
              format={dateFormat}
              fullWidth={true}
              name='expirationDate'
              value={expirationDate}
              onChange={(date) => handleDate(date)}
              placeholder={dateFormat}
              size='small'
              disableFuture={true}
              views={['date', 'month', 'year']}
            />
 </MuiPickersUtilsProvider>

user_144850610
Related