[英]Jquery UI Datepicker - Dependent Datepicker Exclude Holidays in Maxdate
[英]JQuery UI Datepicker - MaxDate exclude disabled days
我試圖在計算 MaxDate時排除禁用日期。 我嘗試了很多方法,但仍然不起作用。 有什么建議嗎?
02-12-2019和星期日已被禁用,但Maxdate 包括禁用日期。 Maxdate 應該是3 天,不包括禁用天數,Maxdays 從今天開始。 我的目標是如果今天到最大天數之間的天數已禁用,則添加天數。 每禁用一天加 1 天
更新
現在我可以在計算 maxdate 時排除星期日,但我仍然無法排除數組日期,它應該在 2019 年 2 月 12 日之后再添加一天。
更新代碼:(
<script>
var array = ["02-12-2019"]
//new
function includeDate(date) {
return date.getDay() !== 7 && date.getDay() !== 0;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
//prev
$('input').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
var isDisabled = ($.inArray(string, array) != -1);
return [includeDate(date) && !isDisabled];
},
maxDate: (function(max) {
var today = new Date();
var nextAvailable = getTomorrow(today);
var count = 0;
var countz = 1;
var newMax = 0;
while(count < max) {
if (includeDate(nextAvailable) ) {
count++;
}
if (includeDate(nextAvailable) ) {
countz++;
}
newMax++;
nextAvailable = getTomorrow(nextAvailable);
}
return newMax;
})
(3)
});
下面應該是解決方案。 您的代碼的問題是您忘記使用 includeDate() 函數驗證日期字符串以查看它是否在數組中。 因此,您的 includeDate() 函數允許該日期,而 maxDate 不允許該日期。
此外,您還可以使用 array.indexOf() 代替 jQuery 的 inArray。 我很確定原生 array.indexOf() 可能更快。
除此之外,我稍微修改了您的 maxDate() 函數。 現在看起來不那么令人困惑了。 我使用了 window onload 以便我可以輕松調試代碼。 你可以把它拿出來。
對於我的版本,在驗證天數時,beforeShowDay 和 includeDate 做同樣的事情。 因此,我編輯 beforeShowDay() 只返回函數 includeDate() 的值。
此外,您應該將輸入選擇器更改為 ID(#) 或 Class(.)。 否則,您的日期選擇器將在所有輸入字段上觸發。
另外,我修改了你的 includeDate() 函數。 沒有第 7 天作為 0 - 6 = 周日 - 周六。
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script> var array = ["02-12-2019"] //new function includeDate(date) { var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date); // Date 0 = Sunday & 6 = Saturday return date.getDay() !== 0 && array.indexOf(dateStr) === -1; } function getTomorrow(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1); } //prev window.onload = function(){ $('input').datepicker( { defaultDate: "+1d", inline: true, showOtherMonths: true, changeMonth: true, selectOtherMonths: true, required: true, showOn: "focus", numberOfMonths: 1, minDate: 1, beforeShowDay: function(date) { return [includeDate(date)]; }, maxDate: (function(max) { // Next available is today at first. var nextAvailable = new Date(); var count = 0; var extra = 0; while(count < max) { /* * Next available is here so that getTomorrow does not need * to run an extra time when the loop is completed. * */ nextAvailable = getTomorrow(nextAvailable); // If the day is not available then we need to add an extra day. if ( !includeDate(nextAvailable) ) { extra++; // Else we just increase the count. } else { count++; } } // Return max + extra. return max + extra; }) (3) }); }; </script> <p>Date: <input type="text" id="datepicker"></p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.