How to hide dates between multiple date range

Question

I want to hide dates between 1st Jan 2019 to 15th Jan 2019 & 1st Feb 2019 to 15th Feb 2019.

$('#from_date').on('change', function() {
    $('#to_date').val(''); $('#to_date').datepicker("destroy");
    var newStart = new Date($(this).val());
    newStart.setDate(newStart.getDate() + 1);
    $('#to_date').datepicker({
        format: 'dd MM, yyyy',
        autoclose: true,
        startDate: newStart
    });
})

HTML

<input type="text" id="from_date" class="form-control datepicker" name="from_date" value="">
<input type="text" id="to_date" class="form-control datepicker" name="to_date" value="">

Duplicate of https://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates — Mahesh, Nov 06 '19 at 05:41

Bhushan Kawadkar · Accepted Answer · 2019-11-06T06:45:07.687

You can customize beforeShowDay function and put your logic to disable selected dates. See below example

$(function(){
 $('#from_date').datepicker();
 var array = ["2019-01-01","2019-01-02","2019-01-03","2019-01-05","2019-01-06","2019-01-07","2019-01-08","2019-01-09","2019-01-10","2019-01-11","2019-01-12","2019-01-13","2019-01-14","2019-01-15","2019-02-01","2019-02-02","2019-02-03","2019-02-04","2019-02-05","2019-02-06","2019-02-07","2019-02-08","2019-02-09","2019-02-10","2019-02-11","2019-02-12","2019-02-13","2019-02-14","2019-02-15"]
$('#from_date').on('change', function() {
    $('#to_date').val(''); $('#to_date').datepicker("destroy");
    var newStart = new Date($(this).val());
    newStart.setDate(newStart.getDate() + 1);
    $('#to_date').datepicker({
        format: 'dd MM, yyyy',
        autoclose: true,
        startDate: newStart,
        beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
          return [ array.indexOf(string) == -1 ]
        }
    });
});
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<input id="from_date">
<br>
<input id="to_date">

EDIT: Use date ranges to disable the dates (You can put date ranges using array or by some other mean)

$(function(){
    $('#from_date').datepicker();
    var dateRanges = ["2019-11-01 2019-11-15","2019-12-01 2019-12-15"];
    $('#from_date').on('change', function() {
        $('#to_date').val(''); $('#to_date').datepicker("destroy");
        var newStart = new Date($(this).val());
        newStart.setDate(newStart.getDate() + 1);
        $('#to_date').datepicker({
            format: 'dd MM, yyyy',
            autoclose: true,
            startDate: newStart,
            beforeShowDay: function(date){
            var enableDate = true;
            for(var i=0; i<dateRanges.length; i++) {
                var dates = dateRanges[i].split(" ");
                var start = new Date(dates[0]);
                var end = new Date(dates[1]);
                // set time factor to zero
                date.setHours(0,0,0,0);
                start.setHours(0,0,0,0);
                end.setHours(0,0,0,0);
                if(date.getTime() >= start.getTime() && date.getTime() <= end.getTime()) {
                  enableDate = false;
                  break;
                }
            }
              if(enableDate) {
                return [true, "","Available"];
              } else {
                 return [false,"","unAvailable"];
              }
            }
        });
    });
 });

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <input id="from_date">
    <br>
    <input id="to_date">

I want multiple date range should be disabled. not multiple dates — Prabhudev Vatnal, Nov 06 '19 at 05:43
I have added edit to my answer to set date ranges, please check updated answer — Bhushan Kawadkar, Nov 06 '19 at 06:45

How to hide dates between multiple date range

1 Answers1