JezK

Edit File: multipledates.html

DECEMBER 27, 2014 BY MOHIT BHANSALI 8 COMMENTS
How to Highlight Particular Dates in JQuery UI Datepicker

In this post I will cover how to highlight specific dates in Jquery UI Datepicker. It pretty simple actually, we will add a custom CSS class to particular dates and then style those particular dates.

Here are steps which we will be following to highlight particular dates in datepicker:

We use array to hold the dates which will be highlighted.
We will utilize  datepicker beforeShowDay function to add custom CSS classes to the dates in array
We will add CSS rules to style the dates.

Introduction

Before we begin, lets try to understand the core concept of beforeShowDay option of datepicker.

beforeShowDay (Official Documentation)
A function that takes a day as a parameter and must return an array with:

[0]: true / false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date’s cell or ” ” for the default presentation
[2]: an optional popup tooltip for this date.
Another important thing to note is that this function is called for each day by the DatePicker.  This is quite a handy function and one can utilize it to disable / enable specific dates

For this particular post, we will utilize the beforeShowDay function to add custom CSS classes.

First, we need an array of dates which we would like to highlight over the datepicker. The following code creates an array of date:

// An array of dates
var eventDates = {};
eventDates[ new Date( '04/12/2014' )] = new Date( '04/12/2014' );
eventDates[ new Date( '06/12/2014' )] = new Date( '06/12/2014' );
eventDates[ new Date( '20/12/2014' )] = new Date( '20/12/2014' );
eventDates[ new Date( '25/12/2014' )] = new Date( '25/12/2014' );
Now, the datepicker provide beforeShowDay function, which will be called before rendering the full datepicker. So we will used this function to highlight the particular dates.

// datepicker
jQuery('#calendar').datepicker( {
    beforeShowDay: function(date) {
        var highlight = eventDates[date];
        if (highlight) {
             return [true, "event", highlight];
        } else {
             return [true, '', ''];
        }
     }
});
Yes, we need some CSS also to differentiate the particular dates:

.event a {
    background-color: #42B373 !important;
    background-image :none !important;
    color: #ffffff !important;
}
Highlighting particular dates

Figure 1: Shows highlighted dates

The following code is a complete example for highlighting particular dates in jQuery UI datepicker.

<!doctype html>
<html lang="en">
<head>
<title> How to Highlight Particular Dates in JQuery UI Datepicker </title>
<meta charset="utf-8">
<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.min.js" > </script>
<script src="js/jquery-ui-1.8.16.custom.min.js" > </script>
<style>
* {
    margin: 0 auto;
    padding: 0;
}

body {
    background-color: #F2F2F2;
}

.container {
    margin: 0 auto;
    width: 920px;
    padding: 50px 20px;
    background-color: #fff;
}

h3 {
    text-align: center;
}

#calendar {
    margin-top: 40px;
}
    
.event a {
    background-color: #42B373 !important;
    background-image :none !important;
    color: #ffffff !important;
}
</style>
<script type="text/javascript">
    jQuery(document).ready(function() {
        
        // An array of dates
        var eventDates = {};
        eventDates[ new Date( '12/04/2014' )] = new Date( '12/04/2014' );
        eventDates[ new Date( '12/06/2014' )] = new Date( '12/06/2014' );
        eventDates[ new Date( '12/20/2014' )] = new Date( '12/20/2014' );
        eventDates[ new Date( '12/25/2014' )] = new Date( '12/25/2014' );
        
        // datepicker
        jQuery('#calendar').datepicker({
            beforeShowDay: function( date ) {
                var highlight = eventDates[date];
                if( highlight ) {
                     return [true, "event", highlight];
                } else {
                     return [true, '', ''];
                }
             }
        });
    });
</script>
</head>
<body>
    <div class="container">
        <h3> Highlight Particular Dates in JQuery UI Datepicker </h3>
        
        <div id="calendar" > </div>
    </div>
</body>
</html>