如何在jQuery UI Datepicker中禁用下一个周末？

Posted 2021-04-02

在订单页面中，我想实现一个日历，其中，如果用户在周五上午10点之后订购，则在下周六和周日交货日期日历中阻止。这是我正在尝试的示例代码，但没有按预期工作。

beforeShowDay: function(date) {
    var day = dt.getDay();
    var hour = dt.getHours();
    if (day == 4) {
        // i think, here i want to put the code to disable days
    }
}

如果我使用这样的东西

beforeShowDay: function(date) {
    var day = date.getDay();
    var dt = new Date();
    var hour = dt.getHours();
    return [(day != 5 && day != 6)];
}

我可以禁用周六和周日，但这将禁用所有周六和周日。我只想在下一个星期六的太阳日禁用残疾人。此外，我可以在var小时内获得当前小时，那么我应该在哪里使用条件来检查小时是否大于上午10点，我使用的是这样的东西但是没有工作

beforeShowDay: function(date) {
    var dt = new Date();
    var hour = dt.getHours();
    var day = date.getDay();
    if (day == 4 && hour >= 10) {
        return [(day != 5 && day != 6)];
    }
}

答案

在beforeShowDay函数内，检查当前日期，看它是星期五还是上午10点之后。如果这是真的那么你还需要检查作为参数传递的date是否是下周六或周日：

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      // date (Friday March 13 2015 10:00 AM) is hardcoded for testing
      var now = new Date(2015, 3 - 1, 13, 10, 0, 0, 0);
      if (now.getDay() === 5 && now.getHours() >= 10) {
        var now_plus_1 = new Date(now.getTime()); now_plus_1.setHours(0, 0, 0, 0); now_plus_1.setDate(now_plus_1.getDate() + 1);
        var now_plus_2 = new Date(now.getTime()); now_plus_2.setHours(0, 0, 0, 0); now_plus_2.setDate(now_plus_2.getDate() + 2);
        return [date.getTime() !== now_plus_1.getTime() && date.getTime() !== now_plus_2.getTime(), ""];
      }
      return [true, ""];
    }
  });
});

@import url("//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/ui-darkness/jquery-ui.min.css");

body { font-size: smaller; }

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<input id="datepicker">

另一答案

$('#datepicker').datepicker({
    beforeShowDay: function(date){
        var dt = new Date(),
            day = dt.getDay(),
            hour = dt.getHours(),
            twoDaysFrmNow = new Date().setDate(dt.getDate() + 2);
        return [!(day == 5 && hour >= 10 && date <= twoDaysFrmNow &&  date > dt)];
    }
});

另一答案

beforeShowDayType：Function（Date date）

默认值：null

一个以日期作为参数的函数，必须返回一个数组：

[0]：true / false表示此日期是否可选[1]：要添加到日期单元格的CSS类名称或默认演示文稿的“”[2]：此日期的可选弹出工具提示

在显示日期选择器之前，每天都会调用该函数。

beforeShowDay: function(date) {
     var day = dt.getDay();
                         var hour = dt.getHours();
                        if( day == 4) {
                           // this is an example of how to use
                            //first parameter is disable or not this date
                            //second parameter is the class you want to add ( jquery will remove the click listener, but you probebly want to style it like this date is not available
                            //third optional tootltip like 'closed on weekends'
                             return [false,'disabled','weekend']
                        }

                    }     

以上是关于如何在jQuery UI Datepicker中禁用下一个周末？的主要内容，如果未能解决你的问题，请参考以下文章

如何触发 jQuery UI DatePicker onclick？

如何通过 npm jquery-ui-datepicker-with-i18n 导入 laravel？

如何更改 jQuery UI datepicker 的主题？

如何在 jquery-ui datepicker 中禁用动画？

如何防止在移动设备上显示 Jquery UI datepicker/timepicker

使用 jquery 验证和 jquery-ui datepicker