jQuery Date Picker- Block a future date range

Question

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.

 <script> $(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; } }); }); </script>

Answer 1

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

 $(document).ready( function() { $(function() { $("#date").datepicker( { firstDay: 1, minDate: +0, maxDate: '+2M', dateFormat: 'DD d MM yy', beforeShowDay: function(date){ var val = new Date("2021-12-24") >= date || new Date("2022-01-04 ") < date; return [ val ] }, 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">