在ShowDay之前追加到jQuery UI Datepicker

Question

我的邏輯上有兩個步驟； 首先顯示/隱藏預定義的日期范圍，然后禁用/啟用特定日期。 我試圖弄清楚是否有可能在不破壞並重新創建JQuery UI Datepicker的情況下對其進行操作的現有beforeShowDay屬性中。 在我的示例中，函數“ disableSpecificDay”是我以編程方式禁用/啟用日期的位置。 有什么建議么？ 我可以找到的所有示例都假定要禁用/啟用的具體日期是已知的。

 var myPicker = $("#myDatePicker"); var excludeDates = ["01/01/2018","04/06/2018","07/05/2018","30/07/2018"]; function disableExcludedDates(date) { for (var i = 0; i < excludeDates.length; i++) { if (new Date(excludeDates[i]).toString() == date.toString()) { return [false]; } } return [true]; } function weekends(action) { if (action === false) { // Hide weekends myPicker.focus(function() { $(".ui-datepicker-week-end").hide(); }); myPicker.blur(function() { $(".ui-datepicker-week-end").hide(); }); } else { // Show weekends myPicker.focus(function() { $(".ui-datepicker-week-end").show(); }); myPicker.blur(function() { $(".ui-datepicker-week-end").show(); }); } } function disableSpecificDay() { var dayNumber = $("#dayNumber").val(); myPicker.datepicker({ // Adjust beforeShowDay here? eg zero "0" will disable Sundays }); } $(function() { myPicker.datepicker( { numberOfMonths: 1, firstDay: 1, dateFormat: "dd/mm/yy", beforeShowDay: disableExcludedDates }); }); 

 br { line-height: 150%; } button, input { width: 130px; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="text" id="myDatePicker"> <button onclick="weekends(true)">Show Weekends</button> <button onclick="weekends(false)">Hide Weekends</button> <br /> <input type="text" id="dayNumber" placeholder="Digit 0-9"> <button onclick="disableSpecificDay()">Hide Specific Day</button> 

Answer 1

您可以發送新功能； 但我不知道這是個好主意。 例如：

function disableSpecificDay() {
  var dayNumber = $("#dayNumber").val();
  myPicker.datepicker("option", "beforeShowDay", function(){ });
}

我將創建一個可以更新的常量。 您的disableExcludedDates()可以檢查此項並根據需要采取措施。

 var myPicker = $("#myDatePicker"); var excludeDates = ["01/01/2018","04/06/2018","07/05/2018","30/07/2018"]; var disableDate = false; function disableExcludedDates(date) { if(disableDate){ if (new Date(disableDate).toString() == date.toString()){ return [false]; } } for (var i = 0; i < excludeDates.length; i++) { if (new Date(excludeDates[i]).toString() == date.toString()) { return [false]; } } return [true]; } function weekends(action) { if (action === false) { // Hide weekends myPicker.focus(function() { $(".ui-datepicker-week-end").hide(); }); myPicker.blur(function() { $(".ui-datepicker-week-end").hide(); }); } else { // Show weekends myPicker.focus(function() { $(".ui-datepicker-week-end").show(); }); myPicker.blur(function() { $(".ui-datepicker-week-end").show(); }); } } function disableSpecificDay() { if($("#dayNumber").val() != ""){ disableDate = $("#dayNumber").val(); } else { disableDate = false; } } $(function() { myPicker.datepicker( { numberOfMonths: 1, firstDay: 1, dateFormat: "dd/mm/yy", beforeShowDay: disableExcludedDates }); }); 

 br { line-height: 150%; } button, input { width: 130px; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="text" id="myDatePicker"> <button onclick="weekends(true)">Show Weekends</button> <button onclick="weekends(false)">Hide Weekends</button> <br /> <input type="text" id="dayNumber" placeholder="Digit 0-9"> <button onclick="disableSpecificDay()">Hide Specific Day</button> 

或者，您可以將此日期添加到excludeDates數組中。 就像是：

function disableSpecificDay() {
  excludeDates.push($("#dayNumber").val());
}

希望能有所幫助。