如何禁用已预订的日期?

时间:2015-05-24 16:30:01

标签: javascript jquery datepicker jquery-ui-datepicker

我有一张预订酒店房间的表格,我在这里有两个名为checkIn和checkOut的字段。我在这里使用jQuery datepicker预订房间我不想显示已预订的日期。我试过这样的。

$(function() {
  var excludedCheckInDates = CHECKINDATES; // an array of already booked checkin dates           
  var excludedCheckOutDates = CHECKOUTDATES; // an array of already booked checkout dates
  $.datepicker
    .setDefaults({
      defaultDate: '+1w',
      changeMonth: true,
      changeYear: true,
      minDate: 0,
      beforeShowDay: function(date) {
        date = $.datepicker.formatDate('yy-mm-dd', date);
        excludedCheckInDates = $.inArray(date,
          excludedCheckInDates) < 0;
        excludedCheckOutDates = $.inArray(date,
          excludedCheckOutDates) < 0;
        if (excludedCheckInDates) {
          return [true, 'selectedDate'];
        } else {
          return false;
        }
        if (excludedCheckOutDates) {
          return true;
        } else {
          return false;
        }
        return true;
      }
    });
  $('#checkIn').datepicker({
    onSelect: function(selectedDate) {
      $('#checkIn').datepicker('option', 'minDate',
        selectedDate || 0);
    }
  });
  $('#checkOut').datepicker({
    onSelect: function(selectedDate) {
      $('#checkOut').datepicker('option', 'maxDate', selectedDate);
    }
  });
});

1 个答案:

答案 0 :(得分:3)

这个小提琴可以帮到你,你只需要找出你想要禁用的日期数组

 var array = ["2015-06-14","2015-06-15","2015-06-16"]

$('input').datepicker({
  beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
    return [ array.indexOf(string) == -1 ]
  }
});

http://jsfiddle.net/CxNNh/2201/

这里是适用于我的更新的jsfiddle

http://jsfiddle.net/CxNNh/2202/