Added template customization example, here week number rendering.

Author: jzaefferer

datepicker-rewrite/date.js

@@ -69,6 +69,7 @@ $.date = function ( datestring, formatstring ) {
 				printDate = new Date( this.year(), date.getMonth(), 1 - leadDays );
 			for ( var row = 0; row < rows; row++ ) {
 				var week = result[ result.length ] = {
+					number: this.iso8601Week( printDate ),
 					days: []
 				};
 				for ( var dayx = 0; dayx < 7; dayx++ ) {
@@ -86,6 +87,15 @@ $.date = function ( datestring, formatstring ) {
 			}
 			return result;
 		},
+		iso8601Week: function( date ) {
+			var checkDate = new Date( date.getTime() );
+			// Find Thursday of this week starting on Monday
+			checkDate.setDate( checkDate.getDate() + 4 - ( checkDate.getDay() || 7 ) );
+			var time = checkDate.getTime();
+			checkDate.setMonth( 0 ); // Compare with Jan 1
+			checkDate.setDate( 1 );
+			return Math.floor( Math.round( ( time - checkDate ) / 86400000) / 7 ) + 1;
+		},
 		select: function() {
 			this.selected = this.clone();
 			return this;

datepicker-rewrite/index.html

@@ -24,7 +24,8 @@
 		<option value="ja-JP">ja-JP</option>
 	</select>
 	<input id="inline-output" />
-	<div id="datepicker-inline" style="margin-bottom:100px"></div>
+	<div id="datepicker-inline-default"></div>
+	<div id="datepicker-inline"></div>
 	<input id="datepicker" type="text" />
 	<input id="datepicker2" type="text" />
 	<script>
@@ -33,7 +34,13 @@
 				$.global.preferCulture( $( this ).val() );
 				$( ":ui-datepicker" ).datepicker( "refresh" );
 			})
+			$( "#datepicker-inline-default" ).datepicker({
+				select: function( event, ui ) {
+					$( "#inline-output" ).val( ui.date );
+				}
+			});
 			$( "#datepicker-inline" ).datepicker( {
+				tmpl: "#ui-datepicker-weeks-tmpl",
 				select: function( event, ui ) {
 					$( "#inline-output" ).val( ui.date );
 				},
@@ -44,6 +51,11 @@
 						day.title = "These are the days of last month";
 						day.extraClasses = "ui-state-disabled";
 					}
+					if ( day.lead && day.date < 3 ) {
+						day.selectable = true;
+						day.render = true;
+						day.extraClasses = "ui-state-disabled";
+					}
 					if ( day.date == 1 ) {
 						day.extraClasses = "ui-state-error";
 						day.title = "Something bad explaining the error highlight";
@@ -105,6 +117,51 @@
 			-->
 		</div>
 	</script>
+	
+	<script id="ui-datepicker-weeks-tmpl" type="text/x-jquery-tmpl">
+		<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>
+				<div class="ui-datepicker-title">
+					<span class="ui-datepicker-month">${date.monthname()}</span> <span class="ui-datepicker-year">${date.year()}</span>
+				</div>
+			</div>
+			<table class="ui-datepicker-calendar">
+				<thead>
+					<tr>
+						<th>Wk</th>
+						{{each(index, day) date.weekdays()}}
+							<th class=""><span title="${day.fullname}">${day.shortname}</span></th>
+						{{/each}}
+					</tr>
+				</thead>
+				<tbody>
+					{{each(index, week) date.days()}}
+					<tr>
+						<td>${week.number}</td>
+						{{each(index, day) week.days}}
+							<td>
+								{{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}}
+					</tr>
+					{{/each}}
+				</tbody>
+			</table>
+		</div>
+	</script>
 
 </body>
 </html>

datepicker-rewrite/picker.js

@@ -7,7 +7,8 @@
 
 $.widget( "ui.datepicker", {
 	options: {
-		eachDay: $.noop
+		eachDay: $.noop,
+		tmpl: "#ui-datepicker-tmpl"
 	},
 	_create: function() {
 		var self = this;
@@ -58,7 +59,7 @@ $.widget( "ui.datepicker", {
 		this.date.refresh();
 		this.picker.empty();
 
-		$( "#ui-datepicker-tmpl" ).tmpl({
+		$( this.options.tmpl ).tmpl({
 			date: this.date
 		}).appendTo( this.picker )
 			.find( "button" ).button().end()