JQuery DatePicker

Add different CSS styling to the date prior to being rendered. Original question: http://stackoverflow.com/questions/25342758/jquery-datepicker-highlight-and-style-multiple-dates

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<div class="whats-on-grid">
    <div class="datepicker-block" class="whats-on-block">
        <div id="datepicker"></div>
    </div>
    <div class="whats-on-block" data-value="1982014"></div>
    <div class="whats-on-block" data-value="2282014"></div>
    <div class="whats-on-block" data-value="1482014"></div>
    <div class="whats-on-block" data-value="2982014"></div>
</div>
<div class="highlights" data-highlight="2882014 2782014 1582014 2082014 1992014"></div>

CSS

.special {
    background-color: red !important;
}
.highlighter {
    background-color: blue !important;
}

JavaScript

$(function () {
    var $container = $('.whats-on-grid');
    var blocks = $('.whats-on-grid .whats-on-block');
    $('#datepicker').datepicker({
        inline: true,
        //nextText: '&rarr;',
        //prevText: '&larr;',
        showOtherMonths: true,
        //dateFormat: 'dd MM yy',
        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        //showOn: "button",
        //buttonImage: "img/calendar-blue.png",
        //buttonImageOnly: true,
        onSelect: function (dateText, inst) {
            var date = new Date(dateText);
            var dateValue = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();

            $container.isotope({
                filter: '[data-value~="' + dateValue + '"], #datepicker-block'
            });
        },
        beforeShowDay: function (date) {
            var target = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();
            var isSpecial = blocks.filter('[data-value~="' + target + '"]').length > 0;
            var isHighlight = $("div[class~='highlights']").filter('[data-highlight~="' + target + '"]').length > 0;
            if (isSpecial) 
                return [true, 'special', ''];
            else if (isHighlight)
                return [true, 'highlighter', ''];
            return [true, '', ''];
        }
    });
});