禁用antd DatePicker的日期和时间答案

【问题标题】：Disable date and time for antd DatePicker禁用antd DatePicker的日期和时间
【发布时间】：2018-03-03 16:08:03
【问题描述】：

我正在使用来自 antd 的DatePicker。

<LocaleProvider locale={enUS}>
    <DatePicker
      format="MM/D/YYYY HH:mm"
      defaultValue={this.getStartValue()}
      showTime={{format: 'HH:mm'}}
      placeholder="Start"
      allowClear={false}
      onOk={this.onStartTimeChange}
    />
</LocaleProvider>
<LocaleProvider locale={enUS}>
    <DatePicker
      format="MM/DD/YYYY HH:mm"
      defaultValue={this.getEndValue()}
      showTime={{format: 'HH:mm'}}
      placeholder="End"
      allowClear={false}
      onOk={this.onEndTimeChange}
    />
</LocaleProvider>

我在我的州有开始和结束时间的价值。

要求是不允许用户在结束时间之后的开始时间选择任何内容。用户也不能选择开始时间之前的结束时间。

这可以使用 disabledDate 和 disabledTime 来实现吗？有没有其他推荐。

【问题讨论】：

标签： reactjs react-redux antd

【解决方案1】：

是的，您可以使用disabledTime 来满足要求。当用户设置startTime时；在您的 onStartTimeChange 处理程序中；为你的 endTimer 设置一个endTimerDisabledTime 状态（反之亦然；所以当用户第一次设置endTime 时；你应该在你的onEndTimeChange 处理程序中设置一个适当的startTimerDisabledTime）

对于禁用日期，可以使用 disabledDate 属性。这与disabledTime 的工作方式不同，它希望您传递一个返回布尔值的函数来启用/禁用日期。

function disabledDate(current) {
  // Can not select days before today and today
  return current && current.valueOf() < Date.now();
}

在您的情况下，您可以使用您的 startDate 或 endDate，而不是 Date.now()。

希望澄清。

【讨论】：

您好，我可以禁用时间，但是我应该如何禁用日期选择，比如当前选择的结束时间是 2017 年 9 月 22 日，那么用户应该不能选择 2017 年 9 月 23 日作为开始时间跨度>
你需要完全相同的东西；设置disabledDate 属性。在此处查看常用 API：ant.design/components/date-picker/#Common-API
disabledate 期望布尔值，所以我无法了解如何禁用以后的日期。 ((currentDate: moment) => boolean)
@learner, disabledDate 函数是map 启用/禁用每个日期的一种方式。 ` function disabledDate(current) { // 不能选择今天和今天之前的天数 return current && current.valueOf() Date.now()。
如何禁用时间，因为它应该显示 02 小时和 0-59 分钟的选择，但 03 只显示到 53

【解决方案2】：

你可以使用

   <DatePicker
            disabledDate={(current) => {
              let customDate = moment().format("YYYY-MM-DD");
              return current && current < moment(customDate, "YYYY-MM-DD");
            }} 
     />

【讨论】：

【解决方案3】：

这是我使用接受开始和结束日期范围的闭包修复它的方法

function disableDateRanges(range = { startDate: false, endDate: false }) {
  const { startDate, endDate } = range;
  return function disabledDate(current) {
    let startCheck = true;
    let endCheck = true;
    if (startDate) {
      startCheck = current && current < moment(startDate, 'YYYY-MM-DD');
    }
    if (endDate) {
      endCheck = current && current > moment(endDate, 'YYYY-MM-DD');
    }
    return (startDate && startCheck) || (endDate && endCheck);
  };
}

你可以在 DatePicker 上调用它：

&lt;DatePicker disabledDate = { disableDateRanges({endDate: new Date('2021-01-01'),startDate:new Date('2020-01-01')}) } /&gt;

【讨论】：

【解决方案4】：

下面的代码应该可以工作：

 disabledDate = (value) =>{
     const form = this.props.form;
    // Can not select days before today and today
    return  value < form.getFieldValue('startDate');
};

并使用以下语法禁用：

 <DatePicker disabledDate={this.disabledDate} placeholder="End Date" />

【讨论】：

【解决方案5】：

对于您可以这样使用的日期范围


    disabledDate = (current) =>{         
            // Can not select days after today and before start Date
            const start = moment('2020-01-01','YYYY-MM-DD');        
            return  current< start || current>moment();
     }

【讨论】：

【解决方案6】：

如果你使用 momentjs，你可以使用 isBefore()

如果你也想允许今天使用

<DatePicker disabledDate={(current) => current.isBefore(moment().subtract(1,"day"))}/>

如果你不想让今天，那么使用

<DatePicker disabledDate={(current) => current.isBefore(moment())}/>

【讨论】：

【解决方案7】：

skipDays 和 allowDays 可以是两天之间的不同天数。

const disabledDate = current => {
// Can not select days before today and no of skip days
if (props.skipDays) {
  return (
    current &&
    current <
      moment()
        .startOf('day')
        .add(props.skipDays, 'day')
  );
}
// Can not select days before today and allow only some days from today
if (props.allowDays) {
  return (
    current &&
    (current < moment().startOf('day') ||
      current >
        moment()
          .startOf('day')
          .add(props.allowDays, 'day'))
  );
}
// Can not select days before today
return current && current < moment().startOf('day');
};

【讨论】：