jQuery Date Picker- Block a future date range

I have jQuery Date Picker on a Shopify store and have been having some issues trying to block out the upcoming range of dates from 24/12/2021 – 04/01/202 DD MM YY, we will not be operating on these days.

Any advice would be very much appreciated, this is the script we are currently using.

   $(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

You need to use beforeShowDay and check which date you need to show without weekend days.

I commented my code below.

$(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">