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>
Just add diablePast for the element KeyboardDatePicker
<MuiPickersUtilsProvider utils={MomentUtils}> <KeyboardDatePicker autoOk={true} diablePast 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.