如何使用日期选择器禁用今天的日期 - 材质 ui

Question

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>

Answer 1

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>

Answer 2

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>