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.

Answer 2

You can use

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

Answer 3

If you are using momentjs you can use isBefore()

If you want to allow today too use

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

If you do not want to allow today then use

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

Answer 4

Here is how I fixed it using a closure that accepts start and end date range

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

You can call it on DatePicker:

 <DatePicker disabledDate = { disableDateRanges({endDate: new Date('2021-01-01'),startDate:new Date('2020-01-01')}) } />

Answer 5

The code below should work:

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

And disable using the following syntax:

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

Answer 6

For the date range you can use like this

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

Answer 7

skipDays and allowDays can be difference days between two days.

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

Answer 8

Yes it is possible to be handled using disableDate & disableTime, the idea of these two function is that they iterate over each date or each time and send them to the function so you can do something like that for date:

disableDate (current) {
   var startDate = moment().subtract(1, 'days') //Today.
   var endDate = moment().add(10, 'days').calendar(); // 10 days in the future from now.
   // It will return false if its before today or after 10 days from now.
   return current < startDate || current > endDate;
}

You can install moment using any of these:

npm install moment --save   # npm

or

yarn add moment             # Yarn

or

Install-Package Moment.js   # NuGet

or

spm install moment --save   # spm

or

meteor add momentjs:moment  # meteor

you can find more at this link: moment.js documentation