jquery - 如何禁用选定的日期？

Question

我有预订酒店的预订表，所以我想禁用选定的日期，我该怎么做？我的意思是，如果我从第一个日期选择器中选择 20，那么 20 在第二个日期选择器中必须是不可选择的

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

尝试这样的事情:

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