jQ -

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://keith-wood.name/css/jquery.datepick.css">
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.datepick.js"></script>
    <!DOCTYPE html>
    <html>
        <head>
            <title>Demo</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
            <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
            <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        </head>
        <body>     
            <input id="datepicker" type="text" data-datepick="rangeSelect: false'"/>
        </body>
    </html>

CSS

.blue-highlight {
    background-color: #0C91FF !important;
    color: white !important;
}

.blue-highlight:hover {
    background-color: #0A70FF !important;
}

.red-highlight {
    background-color: #FF3205 !important;
    color: white !important;    
}

.red-highlight:hover {
    background-color: #FF0800 !important;  
}

JavaScript

$(document).ready(function() {
        //alert(new Date().format("m/d/Y"));
        array1 = ["6/5/2014", "6/14/2014", "6/21/2014"];
        array2 = ["6/15/2014", "6/22/2014"];
        array3 = ["6/9/2014", "6/13/2014"];
        
        $('#datepicker').datepick({
            onDate: function(date, current) { 
                console.log(date.format("m/d/Y"));
                if($.inArray(date.format("m/d/Y") , array1) > -1) {
                    return {content: date.getUTCDate(), dateClass: 'blue-highlight'};
                }
                else if($.inArray(date.format("m/d/Y"), array2) > -1) {              
                    return {content: date.getUTCDate(), dateClass: 'red-highlight'};
                }
                else if($.inArray(date.format("m/d/Y"), array3) > -1) {
                    return {content: date.getUTCDate(), selectable: false};
                } else {
                    return {};
                }             
            }         
        });
    });
    
    /**************************************
     * Date class extension
     * 
     */
    // Provide month names
    Date.prototype.getMonthName = function(){
        var month_names = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
        ];
        
        return month_names[this.getMonth()];
    }
    
    // Provide month abbreviation
    Date.prototype.getMonthAbbr = function(){
        var month_abbrs = [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ];
        
        return month_abbrs[this.getMonth()];
    }
    
    // Provide full day of week name
   ...