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