如何使用日期选择器禁用今天的日期 - 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 日期方法和道具 minDate , maxDate.

来完成

首先使用

声明新日期

const today = new Date();

并在 maxDate prop 中将今天的日期减 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={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>

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

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

javascript

datepicker

reactjs

material-ui