JQUERY DATEPICKER - 排除星期日、特定日期并在 12 点后禁用次日选择答案

【问题标题】：JQUERY DATEPICKER - exclude Sundays, specific dates AND disable next day selection after 12pmJQUERY DATEPICKER - 排除星期日、特定日期并在 12 点后禁用次日选择
【发布时间】：2021-07-01 02:13:03
【问题描述】：

我希望这里有人可以帮助我解决以下问题：-

目前，我的日期选择器 sn-p 有以下脚本，其中我排除了星期日。

  <script>
window.onload = function() {
  if (window.jQuery) {
    let $ = window.jQuery;

    $(function() {
      $("#date").datepicker({
        dateFormat: 'dd/mm/yy',
        minDate: +1, 
        maxDate: '+2M',
        beforeShowDay: function(date) {
    var day = date.getDay();
    return [(day != 0), ''];
        }
      });
    });
  }
}

我想添加以下条件：-

排除多个特定日期（即 16/04/21 等）
禁止客户在下午 12 点之后选择下一个工作日。

对于第 2 点，我有以下代码，但不确定将其包含在上面的哪个位置：-

$("#date" ).datepicker({  
minDate: +1,
beforeShow : function(){
    var dateTime = new Date();
    var hour = dateTime.getHours();
    if(hour  >= 12){
        $(this).datepicker( "option", "minDate", "+2" );
     }
 }

请告知，谢谢！

【问题讨论】：

JqueryUI 维护得不好，现在有更好的日期选择器库。我建议寻找一个更好的库，除非您出于遗留原因必须使用 JQueryUI。
看看这个帖子stackoverflow.com/questions/677976/…也许对你有帮助。

标签： javascript jquery datepicker shopify jquery-ui-datepicker

【解决方案1】：

请参考以下代码sn-p：

$(function () {
    // Dates to exclude
    var excludeDays = ['2021-04-15', '2021-04-16', '2021-04-30'];
    function disableSpecificDate(date) {
        // To disable specific day
        var dateArr = [String(date.getFullYear()), String(date.getMonth() + 1), String(date.getDate())];
        if (dateArr[1].length == 1) dateArr[1] = "0" + dateArr[1];
        if (dateArr[2].length == 1) dateArr[2] = "0" + dateArr[2];
        return excludeDays.indexOf(dateArr.join("-")) == -1;
    }
    $("#date").datepicker({
        dateFormat: 'dd/mm/yy',
        minDate: +1,
        maxDate: '+2M',
        beforeShow: function () {
            // To exclude next business day after 12 PM
            if (new Date().getHours() >= 12) {
                $(this).datepicker("option", "minDate", +2);
            }
        },
        beforeShowDay: function (date) {
            var day = date.getDay();
            return [(day == 0 ? false : disableSpecificDate(date)), ''];
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<input id="date"/>

【讨论】：

天才。谢谢！！

【解决方案2】：

您始终可以使用久经考验且真正的 MomentJS，它具有丰富的开发历史，包括处理本地化、国际化、工作日、假期和其他时间资格方面的好模块。

请注意，您不能做一些幼稚的事情，例如在循环中添加 2。您必须记住处理时区之类的问题，并且您的客户可能在某个时间对他们有效的地方，但是对于在他们的服务器上运行的 Shopify 代码，可能会有所不同。

然后，您从 MomentJS 获得的任何结果都可以用于提供一些小部件，该小部件显示日历并提供将某些日期涂黑的选项。

【讨论】：