jQuery UI Datepicker beforeShowDay Option
Last Updated :
02 Dec, 2021
The jQuery UI beforeShowDay is an option in Datepicker. By using this option we can call any function by using each day. This is executed before showing the calendar.
We don’t want some days to be selected by users (say all tickets for that day is sold-out) then we can apply this option and disable the days for selection by the user. The beforeShowDay runs a function by passing each day as a parameter. We will use the CDN link in code to add different libraries and styles. To display this function like any other jQuery UI widget, we have to link to jQuery and jQuery UI. Copy this code inside your HTML file to link our file to jquery and jquery UI through CDN(Content Delivery Network). Here we have used google’s CDN but you can also use jquery or Microsoft’s CDN
<link href=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css’rel=’stylesheet’>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>
Let us create one array in javascript having elements of days that are not available. In the below, code 9/12/2019 and 13/12/2019 are not available whereas the remaining dates are available. We have used the function beforeShowDay:my_check to execute the javascript code to return True or False based on dates mentioned in the array. Before showing the calendar each day is passed through this function and based on the return value the date is displayed.
Example 1:
<!DOCTYPE html>
<html>
<head>
<link href=
rel='stylesheet'>
<script src=
</script>
<script src=
</script>
<style>
h1{
color:green;
}
.ui-datepicker {
width: 12em;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>jQuery UI beforeShowDay</h4>
Start Date:
<input type="text" id="my_date_picker1">
<script>
$(document).ready(function() {
////////
$(function() {
$("#my_date_picker1").datepicker({
dateFormat: 'dd-mm-yy',
defaultDate: "02-12-2019",
beforeShowDay: my_check
});
});
function my_check(in_date) {
in_date = in_date.getDate() + '/'
+ (in_date.getMonth() + 1) + '/' + in_date.getFullYear();
var my_array = new Array('9/12/2019', '13/12/2019');
//$('#d1').append(in_date+'<br>')
if (my_array.indexOf(in_date) >= 0) {
return [false, "notav", 'Not Available'];
} else {
return [true, "av", "available"];
}
}
})
</script>
</body>
</html>
|
Output:
Blocking a particular day: We can choose to block a particular weekday in the calendar. Which will disable the weekday permanently and make it unavailable for selection for any week. Throughout the calendar. In the below example we have chosen to disable Sunday.
Example 2:
<!DOCTYPE html>
<html>
<head>
<link href=
rel='stylesheet'>
<script src=
</script>
<script src=
</script>
<style>
h1 {
color: green;
}
.ui-datepicker {
width: 12em;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>jQuery UI beforeShowDay</h4> Start Date:
<input type="text" id="my_date_picker1">
<script>
$(document).ready(function() {
$(function() {
$("#my_date_picker1").datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay: my_check
});
});
function my_check(in_date) {
if (in_date.getDay() == 0) {
return [false, "notav", 'Not Available'];
} else {
return [true, "av", "available"];
}
}
})
</script>
</center>
</body>
</html>
|
Output:
More complex filtrations: Now we will try to filter out all second Saturdays also along with all Sundays. We can do this by using the code below.
Identifying Second Saturdays Here is the logic behind identifying a second Saturday in any given month. Firstly, we identify the first day of the month and its weekday(Sunday is 0, Monday is 1 and so on..) 14-(The weekday number of the first day of the month) gives us the date of the 2nd Saturday of the month. Similar logic has been used in the below code.
Example 3:
<!DOCTYPE html>
<html>
<head>
<link href=
rel='stylesheet'>
<script src=
</script>
<script src=
</script>
<style>
h1 {
color: green;
}
.ui-datepicker {
width: 12em;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>jQuery UI beforeShowDay</h4> Start Date:
<input type="text" id="my_date_picker1">
<div id=d1></div>
<script>
$(document).ready(function() {
$(function() {
$("#my_date_picker1").datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay: my_check
});
});
function my_check(in_date) {
var firstDay = new Date(in_date.getFullYear(),
in_date.getMonth(), 1);
var saturday2 = 14 - firstDay.getDay()
if (in_date.getDay() == 0 ||
in_date.getDate() == saturday2) {
return [false, "notav", 'Not Available'];
} else {
return [true, "av", "available"];
}
}
})
</script>
</center>
</body>
</html>
|
Output:
Similarly, we can disable the 2nd and 4th Saturdays also. Here is the code to disable Sunday, 2nd Saturday and 4th Saturday.
function my_check(in_date) {
var firstDay = new Date(in_date.getFullYear(), in_date.getMonth(), 1);
var saturday2 = 14 - firstDay.getDay()
var saturday4 = 28 - firstDay.getDay()
if (in_date.getDay() == 0 || in_date.getDate() == saturday2
|| in_date.getDate() == saturday4) {
return [false, "notav", 'Not Available'];
} else {
return [true, "av", "available"];
}
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...