如何使用日期选择器禁用今天的日期 - 材质 ui答案

【问题标题】：How to Disable today's date using date pickers - material ui如何使用日期选择器禁用今天的日期 - 材质 ui
【发布时间】：2021-03-13 02:04:15
【问题描述】：

我正在处理一个使用 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>

【问题讨论】：

标签： javascript reactjs datepicker material-ui

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：