Highlight selected date from jQuery UI Datepicker

jQuery UI library has many widgets for specific purposes like – Accordion, Tabs, Tooltip, etc. one of them is Datepicker which allows the users to pick a date from the Widget.

It has various options to manage the Datepicker layout e.g. change the default date format, restricting date range, show year dropdown, etc.

While using this Widget you may have a condition arises where you want to highlight some of the specific dates or change the background-color of Holidays, events Days.

You can do this with beforeShowDay option in the datepicker() method. This allows you to specify a CSS class that contains your defined CSS style.

How to Highlight Selected date in jQuery UI Datepicker

Demo Download

Add Datepicker
beforeShowDay
Example
Demo
Conclusion

1. Add Datepicker

You can skip this section if you know How to add Datepicker widget in a control.

Steps

You need to include jQuery UI Datepicker library within your web page. You can also use jQuery UI CDN for include CSS and JS files.

<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- jQuery UI JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

Create a Textbox element.

<input type='text' id='datepicker'>

Now call the datepicker() method on the Textbox which created in the previous step.

$(document).ready({
  // adding datepicker to control
  $('#datepicker').datepicker();

});

2. beforeShowDay

This option allows modifying the day before it displays to the user. It takes a date as a parameter and returns an Array.

The First parameter takes Boolean value true/false. It defines whether Day is selectable or not. If you define false then that Day becomes disabled and the user cannot select it.
The second parameter is optional which allows us to add the CSS class to the Day if you don’t want then specify "" on it. This parameter we use to highlight the specific date.
It is also an optional parameter that set the tooltip to the Day and if you don’t want then specify "".

Syntax –

$(selector).datepicker({
   beforeShowDay: function(date){
      // statements
   }
});

3. Example

I am adding the widget to a Textbox element and define an Array that contains the dates which I want to highlight in the widget.

Define beforeShowDay within datepicker() method. In the function create a new date format according to the defined format (dd-mm-yyyy) in an Array.

Check for the date in the Array with $.inArray() method if it is available then return [true, "highlight", tooltip_text]; otherwise return [true].

NOTE – I passed the name of the class (highlight) in the return Array.

Completed Code

<script type='text/javascript'>
 
// An array of highlighting dates ( 'dd-mm-yyyy' )
var highlight_dates = ['8-11-2022','11-11-2022','18-11-2022','1-12-2022'];
 
$(document).ready(function(){
 
   // Initialize datepicker
   $('#datepicker').datepicker({
       beforeShowDay: function(date){
           var month = date.getMonth()+1;
           var year = date.getFullYear();
           var day = date.getDate();
 
           // Change format of date
           var newdate = day+"-"+month+'-'+year;

           // Set tooltip text when mouse over date
           var tooltip_text = "New event on " + newdate;

           // Check date in Array
           if(jQuery.inArray(newdate, highlight_dates) != -1){
                // Pass class name and tooltip text
                return [true, "highlight", tooltip_text ];
           }
           return [true];
       }
   });
});
</script>

<!-- Text box element -->
<input type='text' id='datepicker'>

CSS

.highlight a{
   background: #29f274 !important;
   color: #ffffff !important;
}

4. Demo

View Demo

5. Conclusion

beforeShowDay option executes every single time for a Day that means it executes 35 times when you go to any month.

You can define the code that you want to execute before showing the Datepicker view to the user.

If you found this tutorial helpful then don't forget to share.

Contents

1. Add Datepicker

2. beforeShowDay

3. Example

4. Demo

5. Conclusion