Как скрыть даты между несколькими диапазонами дат

Question

Я хочу скрыть даты с 1 января 2019 года по 15 января 2019 года и с 1 февраля 2019 года по 15 февраля 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="">

Answer 1

Вы можете настроить функцию beforeShowDay и поставить свою логику, чтобы отключить выбранные даты. См. Ниже пример

$(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">

РЕДАКТИРОВАТЬ : использование диапазонов дат для отключения дат (диапазоны дат можно указывать с использованием массива или каким-либо другим способом)

$(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">