reactjs - 禁用antdDatePicker的日期和时间

Question

我正在使用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>

在我的状态下，我具有开始和结束时间的值(value)。

要求是不允许用户在结束时间之后的开始时间中选择任何内容。此外，用户不应选择开始时间之前的结束时间。

可以使用disabledDate和disabledTime来实现吗？还有其他建议吗？

Answer 1

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



要禁用日期，可以使用disabledDate属性。但这与disabledTime的工作方式不同，并且希望您传递一个返回 bool 值以启用/禁用日期的函数。

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

希望能澄清。