JQuery UI Datepicker - MaxDate 排除禁用天数

Posted 2023-03-14

【中文标题】JQuery UI Datepicker - MaxDate 排除禁用天数

【英文标题】：JQuery UI Datepicker - MaxDate exclude disabled days

【发布时间】：2020-03-23 15:47:52

【问题描述】：

我试图在计算 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/

【问题讨论】：

很难理解你想要做什么。 Maxdate should be 3 days - 你的意思是 maxDate 应该是从今天起 3 天？ maxDate 应该是可点击的，即使它被禁用了？

一条评论 - 您在 $('#datepicker1') 更改处理程序中初始化 $('#datepicker2')，因此它将被初始化多次。你应该只初始化一次，然后change options with the option method。

另外，$holidays 是什么样的？ config('app.date_format_js') 是什么？ #datepicker2 是否与您的问题有关（已禁用 maxDate）？请查看how to create a minimal, complete, and verifiable example - 你可以编辑掉很多这段代码，添加真正的config() 值，这样我们就可以看到工作代码并尝试调试它。

我知道这意味着什么，但我不知道您的 config/app.php 文件中有什么。我们无法运行您的代码，因为我们没有您的config/app.php。对于这个问题，与您使用 Laravel 无关 - 我们只需要知道该值是什么 - 您可以将其删除并替换为 "Y-m-d" （或任何实际值）。 $holidays 也一样——只要给我们一个小的硬编码数组来演示这个问题。请阅读how to create a minimal, complete, and verifiable example。

我昨天在 JSFiddle 中玩这个，但无法让它工作。 beforeShow() 听起来像是做这项工作的正确地方，但 AFAICT 它实际上在所有beforeShowDay() 调用之前运行之前 :-(

【参考方案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>

【讨论】：

兄弟，请在你有空的时候帮助我:( ***.com/questions/59133641/…