JQuery UI Datepicker - MaxDate 排除禁用天数

Question

我试图在计算 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)
    });

http://jsfiddle.net/3o1dmvw5/96/

Answer 1

下面应该是解决方案。 您的代码的问题是您忘记使用 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>