Fixed 3084 Arrange order of month and year selectboxes

diff --git a/demos/functional/templates/ui.datepicker.html b/demos/functional/templates/ui.datepicker.html
index 3afc3202bb928193028c5569a636fffa7a7108c6..db7abe5b29ecbf116da9b3b5eea6b8ef754f134d 100644 (file)
--- 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 0e7c4cb952e3eb6439f67b2d5d6c563f7d93b786..8ec7d7de9edaff5a33388902e2054b1906451f2f 100644 (file)
--- 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;
        },