jquery.datePicker example: datePicker with custom cell renderer

< date picker home

The following example displays how you can use a custom cell renderer to control the behaviour of the date picker. In this case I add a class of "weekend" to the cells which fall on a weekend and I also add the class "disabled". This is a special class which prevents those days from being selectable.

NOTE: You will need firebug to see the results of the demo - firebug lite is included in this page so whatever browser you are in just press F12 to open up the firebug console.

Click here.

Page sourcecode

$(function()
{
    $('.date-pick')
        .datePicker(
            {
                createButton:false,
                renderCallback:function($td, thisDate, month, year)
                {
                    if (thisDate.isWeekend()) {
                        $td.addClass('weekend');
                        $td.addClass('disabled');
                    }
                }
            }
        )
        .bind('click',
            function()
            {
                $(this).dpDisplay();
                this.blur();
                return false;
            }
        )
        .bind('dateSelected',
            function(e, selectedDate, $td)
            {
                console.log('You selected ' + selectedDate);
            }
        );
});

Page CSS

table.jCalendar td.weekend, table.jCalendar td.weekend:hover {
    background: #777;
    color: #555;
}