How to Highlight Specific Dates in jQuery Datepicker
In this tutorial, we will learn How to Highlight Specific Dates in jQuery Datepicker. The Datepicker is a widely used jquery plugin, that provides an easy way to add a calendar. The jQuery Datepicker is a highly configurable plugin that lets you customize date picker functionality as per your requirement. we are going to show you how to highlight specific dates in jQuery UI Datepicker using beforeShowDay option. the beforeShowDay function takes a date and must return an array. We will use beforeShowDay in jQuery Datepicker. The beforeShowDay option allows altering the day before it is displayed on the jQuery calendar.
Also read: Dynamically add remove an element in jQuery
Example
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>How to Highlight Specific Dates in jQuery Datepicker</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<style>
.eventClass a {
background-color: #dda919 !important;
color: #FFF !important;
}
</style>
</head>
<body>
<h1>How to Highlight Specific Dates in jQuery Datepicker</h1>
Date: <input type="text" id="datepickerId">
<script>
var highlightDate = {};
highlightDate[ new Date('01/20/2022')] = new Date('01/20/2022');
highlightDate[ new Date('01/21/2022')] = new Date('01/21/2022');
highlightDate[ new Date('01/22/2022')] = new Date('01/22/2022');
highlightDate[ new Date('01/23/2022')] = new Date('01/23/2022');
$('#datepickerId').datepicker({
beforeShowDay: function( date ) {
var highlight = highlightDate[date];
if( highlight ) {
return [true, "eventClass", 'Tooltip text'];
} else {
return [true, '', ''];
}
}
});
</script>
</body>
</html>
