如何使用日期选择器禁用今天的日期 - 材质 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>