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;
}