JQuery UI日期选择器 - 最大日期排除禁用日期

4
我试图在计算最大日期时排除已禁用的日期,但是尝试了很多方法仍然不起作用。是否有任何建议?
02-12-2019和周日已被禁用,但是Maxdate包括禁用日期。Maxdate应该是3天,其中排除了禁用日期,并且Maxdays从今天开始计算。我的目标是,如果从今天到最大日期之间的日期已禁用,则添加日期。每个禁用日期增加1天。
更新:
现在我可以在计算最大日期时排除周日,但我仍然无法排除数组日期,在这种情况下,它应在02-12-2019后再添加一天。
更新的代码:()
<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/


1
很难理解你想做什么。Maxdate should be 3 days - 你的意思是maxDate应该从今天开始算起三天吗?并且即使它被禁用,maxDate也应该是可点击的吗? - Don't Panic
1
一个注释 - 你在 $('#datepicker1') 的更改处理程序中初始化了 $('#datepicker2'),因此它将被多次初始化。你应该只初始化一次,然后使用 option 方法更改选项 - Don't Panic
1
另外,$holidays 看起来是什么样子的? config('app.date_format_js') 是什么? #datepicker2 是否与您的问题有关(禁用了 maxDate)?请参阅如何创建一个最小化、完整和可验证的示例 - 您可以编辑掉大量代码,添加真实的 config() 值,以便我们能够查看工作的代码并尝试调试它。 - Don't Panic
1
我知道这是什么意思,但我不知道你的 config/app.php 文件里有什么。我们无法运行你的代码,因为我们没有你的 config/app.php 文件。对于这个问题,你使用 Laravel 并不重要 - 我们只需要知道那个值是什么 - 你可以将其删除并替换为 "Y-m-d"(或者它实际的值)。$holidays 同样如此 - 只需给我们一个小的硬编码数组来演示问题。请阅读 如何创建一个最小、完整和可验证的示例 - Don't Panic
1
我昨天在JSFiddle上试了一下,但没能让它正常工作。beforeShow()听起来像是做这个工作的正确位置,但据我所知,它实际上是在所有beforeShowDay()调用之前运行的 :-( - Don't Panic
显示剩余5条评论
1个回答

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>


老兄,如果您有空,请帮我解决这个问题 :( https://stackoverflow.com/questions/59133641/jquery-ui-datepicker-dependent-datepicker-exclude-holidays-in-maxdate - Suvin94

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接