jQuery UI中的datePicker不工作

Question

我想調用jQuery UI日期選擇器中的beforeShowDay函數，但我發現beforeShowDay的位置 很重要，我不知道。

代碼將有助於：

<script> 
    var datePickerOptions = { 
     minDate: 'today', 
     beforeShowDay: available 
    }; 

    /*This is a function only let datePicker show the dates in dateList*/ 
    var available = function(date){ 
     window.console.log("in"); 
     var dmy = (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear(); 
     if($.inArray(dmy, dateList) !== -1) { 
      return [true, "", "Available"]; 
     } 
     else { 
      return [false, "", "unAvailable"]; 
     } 
    }; 

    var init = function(availableDates) { 
     $('.datePicker').datepicker(datePickerOptions); 
    }; 
</script> 

如果我把它寫在這種方式，會的minDate工作，但beforeShowDay不會，控制檯沒有「在」打印。

但如果我把它寫在這樣：

var init = function(availableDates) { 
    $('.datePicker').datepicker({ 
     minDate: 'today', 
     beforeShowDay: available 
    }); 
}; 

會幹活沒有看到這兩種方法之間的真正區別，我真的想用第一種方法。

任何想法？謝謝。

Answer 1

這是因爲當使用available創建datePickerOptions對象時，它沒有使用值進行初始化，所以它的值爲undefined，與在此情況下未傳遞選項相同。在初始化available變量以解決問題後，您可以移動datePickerOptions的創建。

/*This is a function only let datePicker show the dates in dateList*/ 
var available = function(date){ 
    window.console.log("in"); 
    var dmy = (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear(); 
    if($.inArray(dmy, dateList) !== -1) { 
     return [true, "", "Available"]; 
    } 
    else { 
     return [false, "", "unAvailable"]; 
    } 
}; 

var datePickerOptions = { 
    minDate: 'today', 
    beforeShowDay: available 
}; 

var init = function(availableDates) { 
    $('.datePicker').datepicker(datePickerOptions); 
};