How to Highlight Selected date in jQuery UI Datepicker

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

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

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

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

How to Highlight selected date in jQuery UI Datepicker

 


Contents

  1. Add
  2. beforeShowDay
  3. Example
  4. Demo
  5. Conclusion

 

1. Add

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

Steps

  • You need to include jQuery UI Datepicker library within your web page. You can download it from their Offical website.
 <link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
 <script src='jquery-ui.min.js' type='text/javascript'></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();

});
  • That’s All.
  • You can do the same with any other HTML elements.

 

2. beforeShowDay

This option allows us to modify 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 the Day is selectable or not. If you define false then that Day become disable and the user cannot select it.
  • The second parameter is optional that allows us to add CSS class to the Day if you don’t want then specify “”  on it. This parameter we use to highlight specific date.
  • It is also an optional parameter which set tooltip to the Day and if you don’t want then specify “”.

Syntax – 

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

 

3. Example

Explanation

I am adding the widget to a Textbox element and define an Array which 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 = ['1-11-2016','3-11-2016','7-11-2016','10-11-2016'];
 
$(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){
    return [true, "highlight", tooltip_text ];
   }
   return [true];
  }
 });
});
</script>

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

CSS

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

 

4. Demo

Click on the Textbox.


 

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 your code which you want to execute before showing Datepicker view to the user.

I hope this tutorial, helps you and if you find this tutorial, helpful then share with others.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *