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" );

tests/unit/datepicker/options.js

@@ -581,9 +581,9 @@ QUnit.test( "setDate", function( assert ) {
 	date1.setDate( date1.getDate() - 21 );
 	inp.datepicker( "setDate", "c -3 w" );
 	testHelper.equalsDate( assert, inp.datepicker( "getDate" ), date1, "Set date - c -3 w" );
-	date3 = new Date(date1);
+	date3 = new Date( date1 );
 	date3.setFullYear( 1 );
-	inp.datepicker( "setDate", "c " + (1 - date1.getFullYear()) + " y" );
+	inp.datepicker( "setDate", "c " + ( 1 - date1.getFullYear() ) + " y" );
 	testHelper.equalsDate( assert, inp.datepicker( "getDate" ), date3, "Set date - 0001 relatively" );
 
 	// Inline
@@ -1113,7 +1113,7 @@ QUnit.test( "formatDate", function( assert ) {
 		new Date( 2001, 2 - 1, 3 ) ), "day 3 of February ('Saturday'), 2001",
 		"Format date 'day' d 'of' MM ('DD'), yy" );
 	assert.equal( $.datepicker.formatDate( "yy-mm-dd", $.datepicker._newDate( 999, 2 - 1, 3 ) ),
-		"0999-02-03", "Format ancient date yy-mm-dd");
+		"0999-02-03", "Format ancient date yy-mm-dd" );
 	gmtDate = new Date( 2001, 2 - 1, 3 );
 	gmtDate.setMinutes( gmtDate.getMinutes() - gmtDate.getTimezoneOffset() );
 	assert.equal( $.datepicker.formatDate( "@", gmtDate ), "981158400000", "Format date @" );

ui/widgets/datepicker.js

@@ -1173,7 +1173,7 @@ $.extend( Datepicker.prototype, {
 					size = ( match === "@" ? 14 : ( match === "!" ? 20 :
 					( match === "y" && isDoubled ? 4 : ( match === "o" ? 3 : 2 ) ) ) ),
 					minSize = ( match === "y" ? size : 1 ),
-					digits = new RegExp( "^" + (match === "@" ? "-?" : "") + "\\d{" + minSize + "," + size + "}" ),
+					digits = new RegExp( "^" + ( match === "@" ? "-?" : "" ) + "\\d{" + minSize + "," + size + "}" ),
 					num = value.substring( iValue ).match( digits );
 				if ( !num ) {
 					throw "Missing number at position " + iValue;
@@ -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;
 	}
 } );