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.
JavaScript
x
29
29
1
$(document).ready( function() {
2
$(function() {
3
$("#date").datepicker( {
4
firstDay: 1,
5
minDate: +0,
6
maxDate: '+2M',
7
dateFormat: 'DD d MM yy' ,
8
beforeShowDay: $.datepicker.noWeekends,
9
beforeShow : function(){
10
11
var dateTime = new Date();
12
var hour = dateTime.getHours();
13
14
if(hour>=10){
15
$(this).datepicker( "option", "minDate", "+1" );
16
}
17
} } );
18
});
19
$('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
20
if ($('#date').val() == "" || $('#date').val() === undefined)
21
{
22
alert("You must pick a delivery date");
23
return false;
24
} else {
25
//$(this).submit();
26
return true;
27
}
28
});
29
});
JavaScript
1
4
1
<link rel="stylesheet" href="https:////code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
2
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
3
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
4
<input type="text" id="date">
Advertisement
Answer
You need to use beforeShowDay and check which date you need to show without weekend days.
I commented my code below.
JavaScript
1
40
40
1
$(document).ready( function() {
2
$(function() {
3
$("#date").datepicker({
4
firstDay: 1,
5
minDate: +0,
6
maxDate: '+2M',
7
dateFormat: 'DD d MM yy',
8
beforeShowDay: function(date){
9
var noWeekend = $.datepicker.noWeekends(date);
10
// we check if its not a weekend day
11
if (noWeekend[0]) {
12
// show days from range
13
let val = new Date("2021-12-24") >= date || new Date("2022-01-04") < date;
14
return [val];
15
} else {
16
// else use function noWeekend
17
return noWeekend;
18
}
19
},
20
beforeShow : function(){
21
var dateTime = new Date();
22
var hour = dateTime.getHours();
23
24
if (hour >= 10) {
25
$(this).datepicker( "option", "minDate", "+1" );
26
}
27
}
28
});
29
});
30
31
$('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
32
if ($('#date').val() == "" || $('#date').val() === undefined) {
33
alert("You must pick a delivery date");
34
return false;
35
} else {
36
//$(this).submit();
37
return true;
38
}
39
});
40
});
JavaScript
1
4
1
<link rel="stylesheet" href="https:////code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
2
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
3
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
4
<input type="text" id="date">