How to disable selected days?

Question

I have booking form to reservastion hotels so I want to disabled selected days how can I do that ? I mean if I select 20 from first datepicker so 20 must be unselectable in second datepicker

function datePicker() {
  var dateFormat = "DD/MM/YY",
    from = $("#checkin,.checkin").datepicker({
      //numberOfMonths: 2,
      firstDay: 1,
      minDate: 0,
      ignoreReadonly: true,
      showButtonPanel: true,
      closeText: 'Temizle',
      onClose: function(dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
          document.getElementById(this.id).value = '';
          //$('.checkin,#checkin,#checkout,.checkout').val('');
        }
      },
      onSelect: function(selectedDate) {
        window.setTimeout($.proxy(function() {
          $(this).parents(".book-holiday").find("#checkout,.checkout").focus();
        }, this), 10);

        var date2 = $('#checkin,.checkin').datepicker('getDate');
        date2.setDate(date2.getDate() + 1);
        $('#checkout,.checkout').datepicker('setDate', date2);
        //sets minDate to dt1 date + 1
        $('#checkout,.checkout').datepicker('option', 'minDate', date2);
      },
      isTo1: true,
      beforeShow: function(input, inst) {

        $(this).datepicker("widget").addClass("main-datepicker");
        // controlDatepicker(".checkin,#checkin");
        /*setTimeout(function() {
            inst.dpDiv.css({
                top: $(".datepicker").offset().top + 35,
                left: $(".datepicker").offset().left
            });
        }, 0);*/
      }
    });
  $("#checkout,.checkout").datepicker({
    firstDay: 1,
    minDate: 0,
    ignoreReadonly: true,
    showButtonPanel: true,
    closeText: 'Temizle',
    onClose: function(dateText, inst) {
      if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
        document.getElementById(this.id).value = '';
        //$('.checkin,#checkin,#checkout,.checkout').val('');
      }
      var dt1 = $('#checkin.checkin').datepicker('getDate');
      console.log(dt1);
      var dt2 = $('#checkout,.checkout').datepicker('getDate');
      if (dt2 <= dt1) {
        var minDate = $('#checkin,.checkin').datepicker('option', 'minDate');
        $('#checkin,.checkout').datepicker('setDate', minDate);
      }
    },
    ignoreReadonly: true,
    isTo1: true,
    onSelect: function() {
      //$(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
    },
    beforeShow: function(input, inst) {
      /* $(this).datepicker("widget").addClass("main-datepicker");
       controlDatepicker(".checkin,#checkin");
       setTimeout(function() {
           inst.dpDiv.css({
               top: $(".datepicker").offset().top + 35,
               left: $(".datepicker").offset().left
           });
       }, 0);*/
    }

  });

}


datePicker();

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> From : <input type="text" class="checkin"> To: <input type="text" class="checkout">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Answer 1

Maybe you could try to store date and compare them when action is triggered? In that case you will not trigger any action when condition is not fulfilled.

Or you could use something iike that: Jquery UI datepicker. Disable array of Dates

Answer 2

Try something like this:

$("#dt1").datepicker({
            dateFormat: "dd-M-yy",
            minDate: 0,
            onSelect: function (date) {
                var date2 = $('#dt1').datepicker('getDate');
                date2.setDate(date2.getDate() + 1);
                $('#dt2').datepicker('setDate', date2);
                //sets minDate to dt1 date + 1
                $('#dt2').datepicker('option', 'minDate', date2);
            }
        });
        $('#dt2').datepicker({
            dateFormat: "dd-M-yy",
            onClose: function () {
                var dt1 = $('#dt1').datepicker('getDate');
                console.log(dt1);
                var dt2 = $('#dt2').datepicker('getDate');
                if (dt2 <= dt1) {
                    var minDate = $('#dt2').datepicker('option', 'minDate');
                    $('#dt2').datepicker('setDate', minDate);
                }
            }
        });

Working Fiddle