禁用 antd DatePicker 的日期和时间 [英] Disable date and time for antd DatePicker

问题描述

我正在使用 antd 的

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

function disabledDate(current) {//不能选择今天和今天的前几天返回电流 &&current.valueOf() <日期.now();}

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

请参阅此演示了解更多详情:https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date

希望澄清.

I am using DatePicker from antd.

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

I have value of start and end time in my state.

Requirement is to not allow user to pick anything in Start time which is after end time. Also user should not be able to choose end time which is before start time.

Can this be achieved using disabledDate and disabledTime? Is there any other recommendation.

解决方案

Yes, you could use disabledTime to meet the requirements. When a user sets the startTime; in your onStartTimeChange handler; set a endTimerDisabledTime state for your endTimer to work with (and vice versa; so when a user first sets the endTime; you should set an appropriate startTimerDisabledTime in your onEndTimeChange handler)

For disabling dates, the disabledDate prop can be used. This doesn't work the same way as disabledTime though and expects you to pass a function that returns a boolean to enable/disable the date.

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

In your case, instead of Date.now(), you could use your startDate or endDate.

Refer to this demo for further details: https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date

Hope that clarifies.

这篇关于禁用 antd DatePicker 的日期和时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！