Enable customization for day rendering

Author: jzaefferer

datepicker-rewrite/date.js

@@ -71,13 +71,15 @@ $.date = function ( datestring, formatstring ) {
 				var week = result[ result.length ] = {
 					days: []
 				};
-				for ( var day = 0; day < 7; day++ ) {
-					week.days.push( {
+				for ( var dayx = 0; dayx < 7; dayx++ ) {
+					var day = week.days[ week.days.length ] = {
 						lead: printDate.getMonth() != date.getMonth(),
 						date: printDate.getDate(),
 						current: this.selected && this.selected.equal( printDate ),
 						today: today.equal( printDate )
-					});
+					};
+					day.render = day.selectable = !day.lead;
+					this.eachDay( day );
 					// TODO use adjust("D", 1)?
 					printDate.setDate( printDate.getDate() + 1 );
 				}

datepicker-rewrite/index.html

@@ -36,6 +36,21 @@
 			$( "#datepicker-inline" ).datepicker( {
 				select: function( event, ui ) {
 					$( "#inline-output" ).val( ui.date );
+				},
+				eachDay: function( day ) {
+					if ( day.lead && day.date > 20 ) {
+						day.selectable = false;
+						day.render = true;
+						day.title = "These are the days of last month";
+						day.extraClasses = "ui-state-disabled";
+					}
+					if ( day.date == 1 ) {
+						day.extraClasses = "ui-state-error";
+						day.title = "Something bad explaining the error highlight";
+					}
+					if ( day.today ) {
+						day.title = "A good day!";
+					}
 				}
 			});
 			$( "#datepicker, #datepicker2" ).datepicker();
@@ -64,10 +79,17 @@
 					<tr>
 						{{each(index, day) week.days}}
 							<td>
-								{{if !day.lead}}
-									<a class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}}" href="#">
+								{{if day.render}}
+									{{if day.selectable}}
+									<a title="${day.title}" class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href="#">
 										${day.date}
 									</a>
+									{{/if}}
+									{{if !day.selectable}}
+									<span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
+										${day.date}
+									</span>
+									{{/if}}
 								{{/if}}
 							</td>
 						{{/each}}

datepicker-rewrite/picker.js

@@ -7,10 +7,12 @@
 
 $.widget( "ui.datepicker", {
 	options: {
+		eachDay: $.noop
 	},
 	_create: function() {
 		var self = this;
 		this.date = $.date();
+		this.date.eachDay = this.options.eachDay;
 		if ( this.element.is( "input" ) ) {
 			self._bind( {
 				click: "open",