Disable date and time for antd DatePicker

user_1919092 0
Viewed 44110

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.

react-redux antd reactjs
8 Answers

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)

enter image description here

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.

user_38430030

You can use

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

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

user_142493030

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())}/>
user_101388090

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

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

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

user_90416250
Related