Highlighting multiple dates in jQueryUI Datepicker

Shows the ability to highlight multiple non-contiguous dates in the jQuery UI date picker.

by Bhabani Raju

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div class="demo">
    <p>Date: <input type="text" id="datepicker"></p>
</div>

CSS

td.promo, table.ui-datepicker-calendar tbody td.promo a
{
    background: none !important;
    background-color: #ccc !important; 
    color: #333;
}

JavaScript

var promoDates = ['20180108', '20180109', '20120110', '20120115', '20120116', '20120117'];

function arrayContains(needle, haystack) {
    for (stick in haystack) {
        if (haystack[stick] == needle) return true;
    }
    return false;
}

$("#datepicker").datepicker({
    numberOfMonths: 1,
    beforeShowDay: function(thisDate) {
        var date = '0' + thisDate.getDate();
        date = date.substring(date.length - 2);
        var month = '0' + (thisDate.getMonth() + 1);
        month = month.substring(month.length - 2);
        var dateString = thisDate.getFullYear() + '' + month + '' + date;

        if (arrayContains(dateString, promoDates)) {
            return [true, 'promo'];
        }
        return [true];
    }
});