I’m hoping someone here can help me with the following: –
Currently, I have the following script for my datepicker snippet where I have excluded Sundays.
JavaScript
x
19
19
1
<script>
2
window.onload = function() {
3
if (window.jQuery) {
4
let $ = window.jQuery;
5
6
$(function() {
7
$("#date").datepicker({
8
dateFormat: 'dd/mm/yy',
9
minDate: +1,
10
maxDate: '+2M',
11
beforeShowDay: function(date) {
12
var day = date.getDay();
13
return [(day != 0), ''];
14
}
15
});
16
});
17
}
18
}
19
I would like to add the following conditions: –
- Exclude multiple specific dates (i.e. 16/04/21, etc.)
- Disable next business day selection by customers AFTER 12pm.
For point #2, I have the following code but am unsure of where to include it in the above: –
JavaScript
1
10
10
1
$("#date" ).datepicker({
2
minDate: +1,
3
beforeShow : function(){
4
var dateTime = new Date();
5
var hour = dateTime.getHours();
6
if(hour >= 12){
7
$(this).datepicker( "option", "minDate", "+2" );
8
}
9
}
10
Please let me know, thank you!
Advertisement
Answer
Please refer below code snippet:
JavaScript
1
26
26
1
$(function () {
2
// Dates to exclude
3
var excludeDays = ['2021-04-15', '2021-04-16', '2021-04-30'];
4
function disableSpecificDate(date) {
5
// To disable specific day
6
var dateArr = [String(date.getFullYear()), String(date.getMonth() + 1), String(date.getDate())];
7
if (dateArr[1].length == 1) dateArr[1] = "0" + dateArr[1];
8
if (dateArr[2].length == 1) dateArr[2] = "0" + dateArr[2];
9
return excludeDays.indexOf(dateArr.join("-")) == -1;
10
}
11
$("#date").datepicker({
12
dateFormat: 'dd/mm/yy',
13
minDate: +1,
14
maxDate: '+2M',
15
beforeShow: function () {
16
// To exclude next business day after 12 PM
17
if (new Date().getHours() >= 12) {
18
$(this).datepicker("option", "minDate", +2);
19
}
20
},
21
beforeShowDay: function (date) {
22
var day = date.getDay();
23
return [(day == 0 ? false : disableSpecificDate(date)), ''];
24
}
25
});
26
});
JavaScript
1
4
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
3
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
4
<input id="date"/>