jQuery UI DatePicker限制日期集

Question

我正在為酒店域項目開發Jquery-UI Datepicker。 基本上，酒店提供某些套餐/優惠在某些日期有效期內無效。 這些持續時間來自數據庫。 在這些日期之間，用戶無法從Jquery-UI日歷​​選擇預訂日期。 我不知道該怎么實現。

$(".calendar").datepicker({
    dateFormat: 'dd/mm/yy',
    minDate:0
});
/* an array of days which are not applicable for packages/offers Booking */
var disabledDays = ["10-25-2015","10-26-2015","10-27-2015","10-28-2015","11-3-2015","11-4-2015","11-5-2015","11-20-2015","11-21-2015","11-22-2015","12-12-2015","12-13-2015"];

/* utility functions */
function getBookedDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();
    //
}

http://jsfiddle.net/ANJYR/34yfb2zs/1/

當日歷打開時，用戶無法選擇2015年10月25日至2015年10月28日之間的日期。

Answer 1

您可以這樣嘗試：

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

JSFIDDLE演示

Answer 2

參見演示示例： jsFiddle示例

var unavailableDates = ["28-10-2015", "29-10-2015", "27-10-2015"];

function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
    return [true, ""];
} else {
    return [false, "", "Unavailable"];
}
}

$(function() {
$("#iDate").datepicker({
    defaultDate: new Date("1-10-2015"),
    dateFormat: 'dd MM yy',
    beforeShowDay: unavailable
});

});

Answer 3

$(".calendar").datepicker({
    dateFormat: 'dd/mm/yy',
    minDate:0,
    beforeShowDay: getBookedDays
});
/* an array of days which are not applicable for packages/offers Booking */
var disabledDays = ["10-25-2015","10-26-2015","10-27-2015","10-28-2015","11-3-2015","11-4-2015","11-5-2015","11-20-2015","11-21-2015","11-22-2015","12-12-2015","12-13-2015"];

/* utility functions */


function getBookedDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}

DEMO

Answer 4

嘗試這個：

var disableddates = ["28-10-2015", "29-10-2015", "27-10-2015"];

function DisableSpecificDates(date) {

 var m = date.getMonth();
 var d = date.getDate();
 var y = date.getFullYear();

 var currentdate = (m + 1) + '-' + d + '-' + y ;

 for (var i = 0; i < disableddates.length; i++) {

 if ($.inArray(currentdate, disableddates) != -1 ) {
 return [false];
 }
 }

}

 $(function() {
  $( ".calendar" ).datepicker({
  beforeShowDay: DisableSpecificDates
  });
 });