jQuery 日期选择器 - 阻止未来的日期范围

Question

我在 Shopify 商店上有 jQuery 日期选择器，但在尝试阻止即将到来的日期范围从 24/12/2021 - 04/01/202 DD MM YY 时遇到了一些问题，我们这几天不营业。

任何建议将不胜感激，这是我们目前正在使用的脚本。

   $(document).ready( function() {
$(function() {
$("#date").datepicker( {
firstDay: 1,
minDate: +0,
maxDate: '+2M',
dateFormat: 'DD d MM yy' ,
beforeShowDay: $.datepicker.noWeekends,
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 {
//$(this).submit();
return true;
}
});
});

  <link rel="stylesheet" href="https:////code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<input type="text" id="date">

Answer 1

您需要使用 beforeShowDay 并检查您需要在没有周末的情况下显示的日期。

我在下面评论了我的代码。

$(document).ready( function() {
  $(function() {
      $("#date").datepicker({
          firstDay: 1,
          minDate: +0,
          maxDate: '+2M',
          dateFormat: 'DD d MM yy',
          beforeShowDay: function(date){
            var noWeekend = $.datepicker.noWeekends(date);
            // we check if its not a weekend day
            if (noWeekend[0]) {
              // show days from range
              let val = new Date("2021-12-24") >= date || new Date("2022-01-04") < date;
              return [val];
            } else {
              // else use function noWeekend
              return noWeekend;
            }
          },
          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 {
      //$(this).submit();
      return true;
    }
  });
});

<link rel="stylesheet" href="https:////code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<input type="text" id="date">

jQuery 日期选择器 - 阻止未来的日期范围

jQuery Date Picker- Block a future date range

javascript

jquery

datepicker