Ant Design range picker disable array of dates

Question

I need to disable date before today (did it with disabledDate function). And I need to disable specific dates on calendar, like:

Today: 2018-07-30

Dates need to disable: [2018-08-10, 2018-08-12, 2018-08-20]

So, in this case, when I open range picker calendar, I can't select dates before today and this array of dates. What I need to do for that?

Thanks!

Answer 1

I had the same problem, when I've tried to enable just a range of values in RangePicker , using the prop disabledDate .

It's true that, return current && current < moment().endOf('day'); works well, but not with && operator (for some reason). Hence, for example, to enable a specific interval (eg from first January 2018 and first January 2019), you can return a Boolean for each specific date you want to disable:

    function disabledDate(current){
    // or (if it's a class method)
    //disabledDate = (current) => { 
        let start = '2018-01-01';
        let end = '2019-01-01';
        if (current < moment(start)){
            return true;
        }
        else if (current > moment(end)){
            return true;
        }
        else {
            return false; 
        }
    }

Thus, for a specific dates I think you can adapt the same principle to achieve what you want :

        function disabledDate(current){
    // or (if it's a class method)
    //disabledDate = (current) => { 
        let date1 = '2018-08-10';
        let date2 = '2018-08-12';
        let date3 = '2018-08-20';

        if (current===moment(date1)){
            return true;
        }
        else if (current===moment(date2)){
            return true;
        }
        else if (current===moment(date3)){
            return true;
        }
        else {
            return false; 
        }
    }

Finally, you put your function in the props of RangePicker :

<RangePicker disabledDate={disabledDate} />

I think RangePicker calls the function disabledDate each time we change days, months, or years, therefore, when returning a simple condition with && , it ignores the second one. But, when we verify each day with current specifically it works apparently.. (The second code for specific dates was not tested, but the first one was, and works fine!)

Answer 2

the disabled date function compared every date rendered with your query, if you return true it will disable that date.

By this logic, if you want to have an array of enabled dates you would want to do something like the following:

const dates = ['2019-05-23', '2019-05-19']
const disabledDate = current => {
    let index = dates.findIndex(date => date === moment(current).format('YYYY-MM-DD'))
    return index === -1 && true
  }

Essentially: If my date isn't within this array make it disabled.

Answer 3

Let's say you have something like that

function disabledDate(current) {
  return current && current < moment().endOf('day');
}

This is the function proposed by the doc, and this allow you to disable all date before the current day (including this day).

Now, considering you have an array containing all the dates you want to disable you could try something like that:

const dates = ['2018-08-10', '2018-08-12', '2018-08-20'];

function disabledDate(current) { 


  return current && current < moment().endOf('day') 
  && !!dates.find(d=>current === moment(d));
}

Answer 4

current its all dates in the calendar that you see.

this.today its today.

differenceInCalendarDays() its the function to calculate how many days have between two dates.

this.dateArrayDisabled its a array whit all my dates that I want to block.

public disabledDate = (current: Date): boolean => {
  if (differenceInCalendarDays(current, this.today) < 0) {
    return true;
  }
  for (const dateItem of this.dateArrayDisabled) {
    let days = differenceInCalendarDays(dateItem, this.today);
    if (differenceInCalendarDays(current, this.today) === days) {
      return true;
    }
  }
};

in html

<nz-date-picker nzFormat="yyyy-MM-dd" [nzDisabledDate]="disabledDate" formControlName="date">

Answer 5

This works:

function disabledDate(current: any) {
for (let i = 0; i < dates.length; i++) {
  if(current.date() === moment(dates[i]).date() && current.month() === moment(dates[i]).month()){
    return false;
  }     
}
return true;  }

Where dates is an array of DateTimes. Ex:

['2020-05-21T22:00:00.000Z', '2020-05-22T22:00:00.000Z', '2020-05-23T22:00:00.000Z']