Search code examples
javascriptreactjsdatepickermaterial-ui

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


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>

Solution

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