如何使用日期選擇器禁用今天的日期 - 材質 ui

Question

我正在做一個反應項目，我正在使用material-ui-date-pickers並且我想禁用今天的日期，因為該項目基於制造產品、產品的到期日期和計費。 由於制造日期和到期日期不能相同，我想禁用今天的到期日期。 我看到道具minDate, maxDate可以使用，但是否可以使用相同的禁用今天的日期？ 下面是我的代碼。

      <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

是的，這可以使用 JavaScript 日期方法和使用道具minDate, maxDate 。

首先使用聲明新日期

const today = new Date();

並在maxDate道具中將今天的日期減去 1 以獲得昨天的日期並將其作為maxDate 。

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

所以你的完整代碼將是

<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

只需為元素 KeyboardDatePicker 添加 diablePast

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