如何禁用選定日期？

我有預訂表格來預訂酒店，所以我想禁用選定的日子我該怎麼做？我的意思是，如果我從第一個日期選擇器選擇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>

來源

2017-07-19 ani_css

VAR specialDays = {'08/01/2012 '： '預訂'，'08/02/2012'： '查詢'}; datericker（{beforeShowDay：function（date）{ date = $ .datepicker.formatDate（'mm/dd/yy'，date）; var special = specialDays [date] ||' '; return [special ==''，special]; }}）; – Dasma

嘗試是這樣的：

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

來源

2017-07-19 08:56:03

嗨，我試過你的代碼是工作，但我想它有一個小問題。當我選擇第一天自動選擇第二天。我編輯我的文章。 –

這不是一個錯誤，它的功能在小提琴中實現，您可以通過評論一些行來刪除它。檢查更新的小提琴在這裏：http://jsfiddle.net/PPSh3/2768/ –

但我可以再次選擇過去的日子？我刪除哪些代碼？ –

也許你可以嘗試存儲日期並在觸發操作時比較它們？在這種情況下，當條件未滿足時，您不會觸發任何操作。

或者你可以使用的東西就像和認爲： Jquery UI datepicker. Disable array of Dates

來源

2017-07-19 08:58:06

我只需要選擇日期我猜沒有理由使用數組 –

如何禁用選定日期？

回答

相關問題