Disable date and time for antd DatePicker

Question

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.

Answer 1

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.