Highlight selected date and current day.

Author: jzaefferer

datepicker-rewrite/date.js

@@ -75,14 +75,29 @@ $.date = function ( datestring, formatstring ) {
 				for (var day = 0; day < 7; day++) {
 					week.days.push({
 						lead: printDate.getMonth() != month,
-						date: printDate.getDate()
+						date: printDate.getDate(),
+						current: this.selected && this.selected.equal(printDate),
+						today: today.equal(printDate)
 					});
 					// use adjust("D", 1)?
 					printDate.setDate(printDate.getDate() + 1);
 				}
 			}
 			return result;
 		},
+		select: function() {
+			this.selected = this.clone();
+			return this;
+		},
+		clone: function() {
+			return $.date(this.format(), format);
+		},
+		equal: function(other) {
+			function format(date) {
+				return $.global.format(date, "d");
+			}
+			return format(date) == format(other);
+		},
 		date: function() {
 			return date;
 		},
@@ -99,4 +114,6 @@ $.date = function ( datestring, formatstring ) {
 	}
 }
 
+var today = $.date();
+
 }( jQuery ));

datepicker-rewrite/index.html

@@ -43,7 +43,7 @@
 	</script>
 
 	<script id="ui-datepicker-tmpl" type="text/x-jquery-tmpl">
-		<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
+		<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
 			<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
 				<a class="ui-datepicker-prev ui-corner-all" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
 				<a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
@@ -63,9 +63,11 @@
 					{{each(index, week) date.days()}}
 					<tr>
 						{{each(index, day) week.days}}
-							<td class="">
+							<td>
 								{{if !day.lead}}
-									<a class="ui-state-default" href="#">${day.date}</a>
+									<a class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}}" href="#">
+										${day.date}
+									</a>
 								{{/if}}
 							</td>
 						{{/each}}

datepicker-rewrite/picker.js

@@ -38,10 +38,12 @@ $.widget( "ui.datepicker", {
 		this.picker.delegate( ".ui-datepicker-calendar a", "click", function( event ) {
 			event.preventDefault();
 			// TODO exclude clicks on lead days or handle them correctly
-			self.date.setDay( +$( this ).text() );
+			self.date.setDay( +$( this ).text() ).select();
 			if ( !self.inline ) {
 				self.element.val( self.date.format() );
 				self.close();
+			} else {
+				self.refresh();
 			}
 			self._trigger( "select", event, {
 				date: self.date.format(),
@@ -58,7 +60,10 @@ $.widget( "ui.datepicker", {
 			date: this.date
 		}).appendTo( this.picker )
 			.find( "button" ).button().end()
-		
+
+		if ( this.inline ) {
+			this.picker.children().addClass( "ui-datepicker-inline" );
+		}		
 		// against display:none in datepicker.css
 		this.picker.find( ".ui-datepicker" ).css( "display", "block" );
 		this._hoverable( this.picker.find( ".ui-datepicker-header a" ) );