禁用antd DatePicker的日期和时间

Question

我正在使用antd。{/ p>中的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来实现吗？还有其他建议。

Answer 1

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

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

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

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

有关详细信息，请参阅此演示：https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date

希望澄清。

Answer 2

以下代码应该有效：

 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" />

Answer 3

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

vector<float> sig(size);

Answer 4

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');
};