如何禁用所选日期?

时间:2017-07-19 08:50:37

标签: jquery html css jquery-ui jquery-ui-datepicker

我有预订表格到预订酒店,所以我想禁用所选日期我该怎么办?我的意思是,如果我从第一个datepicker中选择20,那么20必须在第二个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>

2 个答案:

答案 0 :(得分:2)

尝试这样的事情:

HttpPost httpPost = new HttpPost("/");
httpPost .setProtocolVersion(HttpVersion.HTTP_1_1);

Working Fiddle

答案 1 :(得分:0)

也许您可以尝试存储日期并在触发操作时对其进行比较?在这种情况下,如果未满足条件,您将不会触发任何操作。

或者你可以使用类似的东西: Jquery UI datepicker. Disable array of Dates

相关问题