0

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">
SKJ
  • 2,184
  • 1
  • 13
  • 25
HASmith
  • 11
  • 2
  • 1
    Does this answer your question? [Jquery UI datepicker. Disable array of Dates](https://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates) – Hanlet Escaño Nov 29 '21 at 00:09
  • Welcome to SO. Please try searching for an answer before posting a new question - even a vague search like "*jquery datepicker block dates*" turns up so many answers here on SO already. – Don't Panic Nov 29 '21 at 21:43
  • Did you saw my answer ? – SKJ Nov 30 '21 at 12:25
  • @Don'tPanic thanks, I had searched and found some answers, though I was unable to make it work. – HASmith Dec 01 '21 at 23:21

1 Answers1

0

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">
SKJ
  • 2,184
  • 1
  • 13
  • 25