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

Question

我正在开发一个使用 material-ui-date-pickers 的 React 项目，我想禁用今天的日期，因为该项目基于制造产品、产品到期日期和计费。 由于生产日期和失效日期不能相同，我想禁用今天的失效日期。我看到可以使用道具

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 日期方法和使用 props 来完成

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

只需为

disablePast

元素添加

KeyboardDatePicker

标志即可：

<MuiPickersUtilsProvider utils={MomentUtils}>
    <KeyboardDatePicker
        autoOk={true}
        disablePast={true}
        variant='inline'
        inputVariant='outlined'
        format={dateFormat}
        fullWidth={true}
        name='expirationDate'
        value={expirationDate}
        onChange={(date) => handleDate(date)}
        placeholder={dateFormat}
        size='small'
        disableFuture={true}
        views={['date', 'month', 'year']}
    />
</MuiPickersUtilsProvider>