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 (e.g. 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.