CODEWITHSUNDEEP
reactjsreact-reduxantd
learner
learner

Reputation: 1982

Disable date and time for antd DatePicker

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.

Upvotes: 16

Views: 85207

Answers (8)

Kirellos Malak Habib
Kirellos Malak Habib

Reputation: 340

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

Upvotes: 0

JITENDRA CHOUDHARY
JITENDRA CHOUDHARY

Reputation: 91

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

Upvotes: 5

Gucal
Gucal

Reputation: 923

You can use

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

Upvotes: 8

Ephrem Demelash
Ephrem Demelash

Reputation: 96

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

Upvotes: 2

ironspider_7
ironspider_7

Reputation: 21

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

Upvotes: 0

Tijo Thomas
Tijo Thomas

Reputation: 21

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

Upvotes: 1

jayanes
jayanes

Reputation: 634

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

Upvotes: 2

Sanjay
Sanjay

Reputation: 508

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.

Upvotes: 20

Related Questions