I want disable several date in date range picker.

I can disable from 10 Oct 2017 - 15 Oct 2017, as follows :

var cekA = document.getElementById('HF_StartDateBlockMasterPage').value;
var cekB = document.getElementById('HF_EndDateBlockMasterPage').value;

$('#daterange').daterangepicker({
    isInvalidDate: function (date) {
        var formatted = date.format('YYYY-MM-DD');
        if (date >= moment(cekA) && date <= moment(cekB)) {
            return true;
        }
    }
});

and that code working fine.

But what if I want disable from 10 Oct 2017 to 15 Oct 2017 and again 25 Oct 2017 to 30 Oct 2017? example my html

I want disable several date in date range picker.

I can disable from 10 Oct 2017 - 15 Oct 2017, as follows :

var cekA = document.getElementById('HF_StartDateBlockMasterPage').value;
var cekB = document.getElementById('HF_EndDateBlockMasterPage').value;

$('#daterange').daterangepicker({
    isInvalidDate: function (date) {
        var formatted = date.format('YYYY-MM-DD');
        if (date >= moment(cekA) && date <= moment(cekB)) {
            return true;
        }
    }
});

and that code working fine.

But what if I want disable from 10 Oct 2017 to 15 Oct 2017 and again 25 Oct 2017 to 30 Oct 2017? example my html

• javascript
• jquery
• asp
• date

• I dont understand your question from "but how if i want disable date from 10 Oct 2017 until 15 Oct 2017 and disable again 25 Oct 2017 until 30 Oct 2017." Would you be more clear about that? travsyst travsyst – Vikas Gupta Commented Sep 4, 2017 at 21:57
• i'm sory. i want disable two date. disable one. disable date from from 10 Oct 2017 until 15 Oct 2017 and disable two 25 Oct 2017 until 30 Oct 2017, so i in October i have available date 21 Oct until 24 Oct 2017.. – travsyst travsyst Commented Sep 4, 2017 at 22:04
• Can you post the HTML which you have implemented so far? Or any JSFiddle? – Phani Kumar M Commented Sep 4, 2017 at 22:10
• You just need to add further if (date >= moment(foo) && date <= moment(bar)) { return true; } condition(s) to the isInvalidDate callback, each condition representing a block of dates to be disabled. – Roamer-1888 Commented Sep 4, 2017 at 22:20
• @ Phani Kumar M , please cek in top.. – travsyst travsyst Commented Sep 4, 2017 at 22:29

1 Answer 1

You just need to add further condition(s) to the isInvalidDate callback, each condition representing a date or block of dates to be disabled.

For example, you could write :

jQuery(function($) {
    var a = moment("2017-10-10");
    var b = moment("2017-10-15");
    var x = moment("2017-10-25");
    var y = moment("2017-10-30");
    $("#daterange").daterangepicker({
        isInvalidDate: function(date) {
            if (date >= a && date <= b) {
                return true;
            }
            if(date >= x && date <= y) {
                return true;
            }
            return false;
        }
    });
});

or, simplified :

jQuery(function($) {
    var a = moment("2017-10-10");
    var b = moment("2017-10-15");
    var x = moment("2017-10-25");
    var y = moment("2017-10-30");
    $("#daterange").daterangepicker({
        isInvalidDate: function(date) {
            return (date >= a && date <= b) || (date >= x && date <= y);
        }
    });
});

Demo

If you have many date ranges, you might write something like this :

jQuery(function($) {
    $("#daterange").daterangepicker({
        isInvalidDate: function(date) {
            var dateRanges = [
                { 'start': moment('2017-10-10'), 'end': moment('2017-10-15') },
                { 'start': moment('2017-10-25'), 'end': moment('2017-10-30') },
                { 'start': moment('2017-11-10'), 'end': moment('2017-11-15') },
                { 'start': moment('2017-11-25'), 'end': moment('2017-11-30') },
                { 'start': moment('2017-12-10'), 'end': moment('2017-12-15') },
                { 'start': moment('2017-12-25'), 'end': moment('2017-12-30') },
                { 'start': moment('2018-01-10'), 'end': moment('2018-01-15') },
                { 'start': moment('2018-01-25'), 'end': moment('2018-01-30') },
                { 'start': moment('2018-02-10'), 'end': moment('2018-02-15') },
                { 'start': moment('2018-02-25'), 'end': moment('2018-02-30') }
            ];
            return dateRanges.reduce(function(bool, range) {
                return bool || (date >= range.start && date <= range.end);
            }, false);
        }
    });
});

Demo