Shopify站点jQuery Date Picker屏蔽指定未来日期范围方案咨询

你需要修改日期选择器的beforeShowDay配置项，将原有屏蔽周末的逻辑与停业日期屏蔽逻辑结合即可，不需要改动HTML代码。

修改后的完整JS代码 #

$(document).ready( function() {
  $(function() {
    $("#date").datepicker( {
      firstDay: 1,
      minDate: +0,
      maxDate: '+2M',
      dateFormat: 'DD d MM yy' ,
      // 替换原有beforeShowDay配置，新增停业日期判断
      beforeShowDay: function(date) {
        // 定义停业日期范围，JS月份从0开始计算，12月对应11，1月对应0
        const blockStart = new Date(2021, 11, 24);
        const blockEnd = new Date(2022, 0, 4);
        // 判断当前日期是否在停业区间内
        if (date >= blockStart && date <= blockEnd) {
          // 返回数组：[是否可选, 自定义类名, 提示文字]
          return [false, "", "站点停业，暂不提供服务"];
        }
        // 不在停业区间的，保留原有屏蔽周末的逻辑
        return $.datepicker.noWeekends(date);
      },
      beforeShow : function(){
        var dateTime = new Date();
        var hour = dateTime.getHours();
        if(hour>=10){
          $(this).datepicker( "option", "minDate", "+1" );
        }
      } 
    });
  });
  $('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if ($('#date').val() == "" || $('#date').val() === undefined) {
      alert("You must pick a delivery date");
      return false;
    } else {
      return true;
    }
  });
});

逻辑说明 #

• 保留了所有原有功能：周一为一周首日、当天10点后最小可选日期为次日、最多可选未来2个月日期、自动屏蔽周末
• 停业日期区间可灵活调整，只需修改blockStart和blockEnd的日期参数即可
• 不可选的停业日期会自动灰化，用户 hover 时会提示"站点停业，暂不提供服务"，也可以根据需要自定义提示文字

内容的提问来源于stack exchange，提问作者HASmith