Fixed 3084 Arrange order of month and year selectboxes

2 files changed, 12 insertions, 4 deletions

diff --git a/demos/functional/templates/ui.datepicker.html b/demos/functional/templates/ui.datepicker.html
index 3afc3202b..db7abe5b2 100644
--- a/demos/functional/templates/ui.datepicker.html
+++ b/demos/functional/templates/ui.datepicker.html
@@ -252,6 +252,7 @@
 					{	desc: 'Prev/Today/Next links as date formats',	source: '$("#misc").datepicker({navigationAsDateFormat: true, prevText: "<M", currentText: "M y", nextText: "M>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
 					{	desc: 'Prev/Today/Next links as date formats in French',	source: '$("#misc").datepicker($.extend({}, $.datepicker.regional["fr"], {navigationAsDateFormat: true, prevText: "<MM", currentText: "MM yy", nextText: "MM>", numberOfMonths: 2, stepMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' },
 					{	desc: 'Today link goes to current selection',	source: '$("#misc").datepicker({gotoCurrent: true, currentText: "Current", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+					{	desc: 'Show the month select after the year one',	source: '$("#misc").datepicker({monthAfterYear: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
 					{	desc: 'Highlight the hovered week',	source: '$("#misc").datepicker({highlightWeek: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
 					{	desc: 'Show days from other months',	source: '$("#misc").datepicker({showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
 					{	desc: 'Show week of the year (ISO 8601)',	source: '$("#misc").datepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
diff --git a/ui/ui.datepicker.js b/ui/ui.datepicker.js
index 0e7c4cb95..8ec7d7de9 100644
--- a/ui/ui.datepicker.js
+++ b/ui/ui.datepicker.js
@@ -84,6 +84,7 @@ function Datepicker() {
 		gotoCurrent: false, // True if today link goes back to current selection instead
 		changeMonth: true, // True if month can be selected directly, false if only prev/next
 		changeYear: true, // True if year can be selected directly, false if only prev/next
+		monthAfterYear: false, // True if the year select precedes month, false for month then year
 		yearRange: '-10:+10', // Range of years to display in drop-down,
 			// either relative to current year (-nn:+nn) or absolute (nnnn:nnnn)
 		changeFirstDay: true, // True to click on day name to change, false to remain as set
@@ -1370,26 +1371,30 @@ $.extend(Datepicker.prototype, {
 	_generateMonthYearHeader: function(inst, drawMonth, drawYear, minDate, maxDate,
 			selectedDate, secondary, showStatus, initStatus, monthNames) {
 		minDate = (inst.rangeStart && minDate && selectedDate < minDate ? selectedDate : minDate);
+		var monthAfterYear = this._get(inst, 'monthAfterYear');
 		var html = '<div class="ui-datepicker-header">';
+		var monthHtml = '';
 		// month selection
 		if (secondary || !this._get(inst, 'changeMonth'))
-			html += monthNames[drawMonth] + '&#xa0;';
+			monthHtml += monthNames[drawMonth] + '&#xa0;';
 		else {
 			var inMinYear = (minDate && minDate.getFullYear() == drawYear);
 			var inMaxYear = (maxDate && maxDate.getFullYear() == drawYear);
-			html += '<select class="ui-datepicker-new-month" ' +
+			monthHtml += '<select class="ui-datepicker-new-month" ' +
 				'onchange="jQuery.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'M\');" ' +
 				'onclick="jQuery.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
 				this._addStatus(showStatus, inst.id, this._get(inst, 'monthStatus'), initStatus) + '>';
 			for (var month = 0; month < 12; month++) {
 				if ((!inMinYear || month >= minDate.getMonth()) &&
 						(!inMaxYear || month <= maxDate.getMonth()))
-					html += '<option value="' + month + '"' +
+					monthHtml += '<option value="' + month + '"' +
 						(month == drawMonth ? ' selected="selected"' : '') +
 						'>' + monthNames[month] + '</option>';
 			}
-			html += '</select>';
+			monthHtml += '</select>';
 		}
+		if (!monthAfterYear)
+			html += monthHtml;
 		// year selection
 		if (secondary || !this._get(inst, 'changeYear'))
 			html += drawYear;
@@ -1422,6 +1427,8 @@ $.extend(Datepicker.prototype, {
 			}
 			html += '</select>';
 		}
+		if (monthAfterYear)
+			html += monthHtml;
 		html += '</div>'; // Close datepicker_header
 		return html;
 	},