Datepicker: Show four-digit years in title

Author: mattheww-skyward

tests/unit/datepicker/core.js

@@ -39,9 +39,11 @@ QUnit.test( "widget method", function( assert ) {
 
 QUnit.test( "baseStructure", function( assert ) {
 	var ready = assert.async();
-	assert.expect( 58 );
+	assert.expect( 60 );
 	var header, title, table, thead, week, panel, inl, child,
-		inp = testHelper.initNewInput(),
+		inp = testHelper.initNewInput( {
+			defaultDate: $.datepicker._newDate( 1, 2 - 1, 3 )
+		} ),
 		dp = $( "#ui-datepicker-div" );
 
 	function step1() {
@@ -61,7 +63,7 @@ QUnit.test( "baseStructure", function( assert ) {
 			assert.ok( title.is( "div.ui-datepicker-title" ) && title.html() !== "", "Structure - title division" );
 			assert.equal( title.children().length, 2, "Structure - title child count" );
 			assert.ok( title.children().first().is( "span.ui-datepicker-month" ) && title.children().first().text() !== "", "Structure - month text" );
-			assert.ok( title.children().last().is( "span.ui-datepicker-year" ) && title.children().last().text() !== "", "Structure - year text" );
+			assert.ok( title.children().last().is( "span.ui-datepicker-year" ) && title.children().last().text() === "0001", "Structure - year text" );
 
 			table = dp.children().eq( 1 );
 			assert.ok( table.is( "table.ui-datepicker-calendar" ), "Structure - month table" );
@@ -90,12 +92,15 @@ QUnit.test( "baseStructure", function( assert ) {
 		inp = testHelper.initNewInput( {
 			changeMonth: true,
 			changeYear: true,
-			showButtonPanel: true
+			showButtonPanel: true,
+			defaultDate: $.datepicker._newDate( 1, 2 - 1, 3 )
 		} );
 		testHelper.onFocus( inp, function() {
 			title = dp.find( "div.ui-datepicker-title" );
 			assert.ok( title.children().first().is( "select.ui-datepicker-month" ), "Structure - month selector" );
 			assert.ok( title.children().last().is( "select.ui-datepicker-year" ), "Structure - year selector" );
+			assert.equal( title.children().last().children().first().text(), "-9" );
+			assert.equal( title.children().last().children().last().text(), "0011" );
 
 			panel = dp.children().last();
 			assert.ok( panel.is( "div.ui-datepicker-buttonpane" ), "Structure - button panel division" );

ui/widgets/datepicker.js

@@ -1415,7 +1415,7 @@ $.extend( Datepicker.prototype, {
 							output += formatName( "M", date.getMonth(), monthNamesShort, monthNames );
 							break;
 						case "y":
-							output += ( "0000" + date.getFullYear() ).slice( lookAhead( "y" ) ? -4 : -2 );
+							output += lookAhead( "y" ) ? this._formatYear( date.getFullYear() ) : ( "00" + date.getFullYear() ).slice( -2 );
 							break;
 						case "@":
 							output += date.getTime();
@@ -1878,7 +1878,7 @@ $.extend( Datepicker.prototype, {
 		if ( !inst.yearshtml ) {
 			inst.yearshtml = "";
 			if ( secondary || !changeYear ) {
-				html += "<span class='ui-datepicker-year'>" + drawYear + "</span>";
+				html += "<span class='ui-datepicker-year'>" + this._formatYear( drawYear ) + "</span>";
 			} else {
 
 				// determine range of years to display
@@ -1898,7 +1898,7 @@ $.extend( Datepicker.prototype, {
 				for ( ; year <= endYear; year++ ) {
 					inst.yearshtml += "<option value='" + year + "'" +
 						( year === drawYear ? " selected='selected'" : "" ) +
-						">" + year + "</option>";
+						">" + this._formatYear( year ) + "</option>";
 				}
 				inst.yearshtml += "</select>";
 
@@ -2040,6 +2040,13 @@ $.extend( Datepicker.prototype, {
 			date.setFullYear( date.getFullYear() - 1900 );
 		}
 		return date;
+	},
+
+	/* Add leading zeros to produce an at-least-four-digit year. */
+	_formatYear: function (year) {
+		var yearString = "" + year;
+		return year < 0 ? yearString :
+			yearString.length < 4 ? ( "0000" + yearString ).slice( -4 ) : yearString;
 	}
 } );