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>
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>