Ticket #3647: jquery-ui-trunk-datepicker.patch

File jquery-ui-trunk-datepicker.patch, 28.5 KB (added by caphun, 11 years ago)
  • ui.datepicker.js

     
    3838        this._disableClass = 'ui-datepicker-disabled'; // The name of the disabled covering marker class
    3939        this._unselectableClass = 'ui-datepicker-unselectable'; // The name of the unselectable cell marker class
    4040        this._currentClass = 'ui-datepicker-current-day'; // The name of the current day marker class
    41         this._dayOverClass = 'ui-datepicker-days-cell-over'; // The name of the day hover marker class
     41        this._dayOverClass = 'ui-state-hover'; // The name of the day hover marker class
    4242        this._weekOverClass = 'ui-datepicker-week-over'; // The name of the week hover marker class
    4343        this.regional = []; // Available regional settings, indexed by language code
    4444        this.regional[''] = { // Default regional settings
    4545                clearText: 'Clear', // Display text for clear link
    4646                clearStatus: 'Erase the current date', // Status text for clear link
    47                 closeText: 'Close', // Display text for close link
     47                closeText: 'Done', // Display text for close link
    4848                closeStatus: 'Close without change', // Status text for close link
    49                 prevText: '<Prev', // Display text for previous month link
     49                prevText: 'Prev', // Display text for previous month link
    5050                prevStatus: 'Show the previous month', // Status text for previous month link
    5151                prevBigText: '<<', // Display text for previous year link
    5252                prevBigStatus: 'Show the previous year', // Status text for previous year link
    53                 nextText: 'Next>', // Display text for next month link
     53                nextText: 'Next', // Display text for next month link
    5454                nextStatus: 'Show the next month', // Status text for next month link
    5555                nextBigText: '>>', // Display text for next year link
    5656                nextBigStatus: 'Show the next year', // Status text for next year link
    5757                currentText: 'Today', // Display text for current month link
    5858                currentStatus: 'Show the current month', // Status text for current month link
    59                 monthNames: ['January','February','March','April','May','June',
    60                         'July','August','September','October','November','December'], // Names of months for drop-down and formatting
     59                monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'], // Names of months for drop-down and formatting
    6160                monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting
    6261                monthStatus: 'Show a different month', // Status text for selecting a month
    6362                yearStatus: 'Show a different year', // Status text for selecting a year
     
    8483                buttonText: '...', // Text for trigger button
    8584                buttonImage: '', // URL for trigger button image
    8685                buttonImageOnly: false, // True if the image appears alone, false if it appears on a button
    87                 closeAtTop: true, // True to have the clear/close at the top,
    88                         // false to have them at the bottom
    89                 mandatory: false, // True to hide the Clear link, false to include it
    9086                hideIfNoPrevNext: false, // True to hide next/previous month links
    9187                        // if not applicable, false to just disable them
    9288                navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links
    93                 showBigPrevNext: false, // True to show big prev/next links
    9489                gotoCurrent: false, // True if today link goes back to current selection instead
    95                 changeMonth: true, // True if month can be selected directly, false if only prev/next
    96                 changeYear: true, // True if year can be selected directly, false if only prev/next
     90                changeMonth: false, // True if month can be selected directly, false if only prev/next
     91                changeYear: false, // True if year can be selected directly, false if only prev/next
    9792                showMonthAfterYear: false, // True if the year select precedes month, false for month then year
    9893                yearRange: '-10:+10', // Range of years to display in drop-down,
    9994                        // either relative to current year (-nn:+nn) or absolute (nnnn:nnnn)
    10095                changeFirstDay: true, // True to click on day name to change, false to remain as set
    10196                highlightWeek: false, // True to highlight the selected week
    10297                showOtherMonths: false, // True to show dates in other months, false to leave blank
    103                 showWeeks: false, // True to show week of the year, false to omit
    10498                calculateWeek: this.iso8601Week, // How to calculate the week of the year,
    10599                        // takes a Date and returns the number of the week for it
    106100                shortYearCutoff: '+10', // Short year values < this are in the current century,
     
    123117                numberOfMonths: 1, // Number of months to show at a time
    124118                showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0)
    125119                stepMonths: 1, // Number of months to step back/forward
    126                 stepBigMonths: 12, // Number of months to step back/forward for the big links
    127120                rangeSelect: false, // Allows for selecting a date range on one date picker
    128121                rangeSeparator: ' - ', // Text between two dates in a range
    129122                altField: '', // Selector for an alternate field to store selected dates into
    130123                altFormat: '', // The date format to use for the alternate field
    131                 constrainInput: true // The input is constrained by the current date format
     124                constrainInput: true, // The input is constrained by the current date format
     125                showButtonPanel: false // True to show button panel, false to not show it
    132126        };
    133127        $.extend(this._defaults, this.regional['']);
    134         this.dpDiv = $('<div id="' + this._mainDivId + '" style="display: none;"></div>');
     128        this.dpDiv = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"></div>');
    135129}
    136130
    137131$.extend(Datepicker.prototype, {
     
    190184                        drawMonth: 0, drawYear: 0, // month being drawn
    191185                        inline: inline, // is datepicker inline or not
    192186                        dpDiv: (!inline ? this.dpDiv : // presentation div
    193                         $('<div class="' + this._inlineClass + '"></div>'))};
     187                        $('<div class="' + this._inlineClass + ' ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'))};
    194188        },
    195189
    196190        /* Attach the date picker to an input field. */
     
    485479                                                break; // select the value on enter
    486480                                case 27: $.datepicker._hideDatepicker(null, $.datepicker._get(inst, 'duration'));
    487481                                                break; // hide on escape
    488                                 case 33: $.datepicker._adjustDate(event.target, (event.ctrlKey ?
    489                                                         -$.datepicker._get(inst, 'stepBigMonths') :
    490                                                         -$.datepicker._get(inst, 'stepMonths')), 'M');
     482                                case 33: $.datepicker._adjustDate(event.target, -$.datepicker._get(inst, 'stepMonths'), 'M');
    491483                                                break; // previous month/year on page up/+ ctrl
    492                                 case 34: $.datepicker._adjustDate(event.target, (event.ctrlKey ?
    493                                                         +$.datepicker._get(inst, 'stepBigMonths') :
    494                                                         +$.datepicker._get(inst, 'stepMonths')), 'M');
     484                                case 34: $.datepicker._adjustDate(event.target, +$.datepicker._get(inst, 'stepMonths'), 'M');
    495485                                                break; // next month/year on page down/+ ctrl
    496                                 case 35: if (event.ctrlKey || event.metaKey) $.datepicker._clearDate(event.target);
    497                                                 handled = event.ctrlKey || event.metaKey;
    498                                                 break; // clear on ctrl or command +end
    499486                                case 36: if (event.ctrlKey || event.metaKey) $.datepicker._gotoToday(event.target);
    500487                                                handled = event.ctrlKey || event.metaKey;
    501488                                                break; // current on ctrl or command +home
    502489                                case 37: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, -1, 'D');
    503490                                                handled = event.ctrlKey || event.metaKey;
    504491                                                // -1 day on ctrl or command +left
    505                                                 if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, (event.ctrlKey ?
    506                                                                         -$.datepicker._get(inst, 'stepBigMonths') :
    507                                                                         -$.datepicker._get(inst, 'stepMonths')), 'M');
     492                                                if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, -$.datepicker._get(inst, 'stepMonths'), 'M');
    508493                                                // next month/year on alt +left on Mac
    509494                                                break;
    510495                                case 38: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, -7, 'D');
     
    513498                                case 39: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, +1, 'D');
    514499                                                handled = event.ctrlKey || event.metaKey;
    515500                                                // +1 day on ctrl or command +right
    516                                                 if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, (event.ctrlKey ?
    517                                                                         +$.datepicker._get(inst, 'stepBigMonths') :
    518                                                                         +$.datepicker._get(inst, 'stepMonths')), 'M');
     501                                                if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, +$.datepicker._get(inst, 'stepMonths'), 'M');
    519502                                                // next month/year on alt +right
    520503                                                break;
    521504                                case 40: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, +7, 'D');
     
    580563                // determine sizing offscreen
    581564                inst.dpDiv.css({position: 'absolute', display: 'block', top: '-1000px'});
    582565                $.datepicker._updateDatepicker(inst);
    583                 // fix width for dynamic number of date pickers
    584                 inst.dpDiv.width($.datepicker._getNumberOfMonths(inst)[1] *
    585                         $('.ui-datepicker', inst.dpDiv[0])[0].offsetWidth);
    586566                // and adjust position before showing
    587567                offset = $.datepicker._checkOffset(inst, offset, isFixed);
    588568                inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ?
     
    615595                        height: inst.dpDiv.height() + 4};
    616596                inst.dpDiv.empty().append(this._generateHTML(inst)).
    617597                        find('iframe.ui-datepicker-cover').
    618                         css({width: dims.width, height: dims.height});
     598                                css({width: dims.width, height: dims.height})
     599                        .end()
     600                        .find('button, .ui-datepicker-prev, .ui-datepicker-next')
     601                                .bind('mouseover', function(){
     602                                        $(this).addClass('ui-state-hover');
     603                                })
     604                                .bind('mouseout', function(){
     605                                        $(this).removeClass('ui-state-hover');
     606                                })
     607                        .end();
    619608                var numMonths = this._getNumberOfMonths(inst);
    620609                inst.dpDiv[(numMonths[0] != 1 || numMonths[1] != 1 ? 'add' : 'remove') +
    621610                        'Class']('ui-datepicker-multi');
     
    707696
    708697        /* Tidy up after a dialog display. */
    709698        _tidyDialog: function(inst) {
    710                 inst.dpDiv.removeClass(this._dialogClass).unbind('.ui-datepicker');
     699                inst.dpDiv.removeClass(this._dialogClass).unbind('.ui-datepicker-calendar');
    711700                $('.' + this._promptClass, inst.dpDiv).remove();
    712701        },
    713702
     
    821810                }
    822811        },
    823812
    824         /* Erase the input field and hide the date picker. */
    825         _clearDate: function(id) {
    826                 var target = $(id);
    827                 var inst = this._getInst(target[0]);
    828                 if (this._get(inst, 'mandatory'))
    829                         return;
    830                 inst.stayOpen = false;
    831                 inst.endDay = inst.endMonth = inst.endYear = inst.rangeStart = null;
    832                 this._selectDate(target, '');
    833         },
    834 
    835813        /* Update the input field with the selected date. */
    836814        _selectDate: function(id, dateStr) {
    837815                var target = $(id);
     
    13351313                        return [inst.rangeStart || startDate,
    13361314                                (!inst.endYear ? inst.rangeStart || startDate :
    13371315                                this._daylightSavingAdjust(new Date(inst.endYear, inst.endMonth, inst.endDay)))];
    1338                 } else
    1339                         return startDate;
     1316                } else {
     1317                        return startDate;                       
     1318                }
    13401319        },
    13411320
    13421321        /* Generate the HTML for the current state of the date picker. */
     
    13471326                var showStatus = this._get(inst, 'showStatus');
    13481327                var initStatus = this._get(inst, 'initStatus') || '&#xa0;';
    13491328                var isRTL = this._get(inst, 'isRTL');
    1350                 // build the date picker HTML
    1351                 var clear = (this._get(inst, 'mandatory') ? '' :
    1352                         '<div class="ui-datepicker-clear"><a onclick="jQuery.datepicker._clearDate(\'#' + inst.id + '\');"' +
    1353                         this._addStatus(showStatus, inst.id, this._get(inst, 'clearStatus'), initStatus) + '>' +
    1354                         this._get(inst, 'clearText') + '</a></div>');
    1355                 var controls = '<div class="ui-datepicker-control">' + (isRTL ? '' : clear) +
    1356                         '<div class="ui-datepicker-close"><a onclick="jQuery.datepicker._hideDatepicker();"' +
    1357                         this._addStatus(showStatus, inst.id, this._get(inst, 'closeStatus'), initStatus) + '>' +
    1358                         this._get(inst, 'closeText') + '</a></div>' + (isRTL ? clear : '')  + '</div>';
     1329                var showButtonPanel = this._get(inst, 'showButtonPanel');       
    13591330                var prompt = this._get(inst, 'prompt');
    1360                 var closeAtTop = this._get(inst, 'closeAtTop');
    13611331                var hideIfNoPrevNext = this._get(inst, 'hideIfNoPrevNext');
    13621332                var navigationAsDateFormat = this._get(inst, 'navigationAsDateFormat');
    1363                 var showBigPrevNext = this._get(inst, 'showBigPrevNext');
    13641333                var numMonths = this._getNumberOfMonths(inst);
    13651334                var showCurrentAtPos = this._get(inst, 'showCurrentAtPos');
    13661335                var stepMonths = this._get(inst, 'stepMonths');
    1367                 var stepBigMonths = this._get(inst, 'stepBigMonths');
    13681336                var isMultiMonth = (numMonths[0] != 1 || numMonths[1] != 1);
    13691337                var currentDate = this._daylightSavingAdjust((!inst.currentDay ? new Date(9999, 9, 9) :
    13701338                        new Date(inst.currentYear, inst.currentMonth, inst.currentDay)));
     
    13931361                prevText = (!navigationAsDateFormat ? prevText : this.formatDate(prevText,
    13941362                        this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepMonths, 1)),
    13951363                        this._getFormatConfig(inst)));
    1396                 var prevBigText = (showBigPrevNext ? this._get(inst, 'prevBigText') : '');
    1397                 prevBigText = (!navigationAsDateFormat ? prevBigText : this.formatDate(prevBigText,
    1398                         this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepBigMonths, 1)),
    1399                         this._getFormatConfig(inst)));
    1400                 var prev = '<div class="ui-datepicker-prev">' + (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ?
    1401                         (showBigPrevNext ? '<a onclick="jQuery.datepicker._adjustDate(\'#' + inst.id + '\', -' + stepBigMonths + ', \'M\');"' +
    1402                         this._addStatus(showStatus, inst.id, this._get(inst, 'prevBigStatus'), initStatus) + '>' + prevBigText + '</a>' : '') +
    1403                         '<a onclick="jQuery.datepicker._adjustDate(\'#' + inst.id + '\', -' + stepMonths + ', \'M\');"' +
    1404                         this._addStatus(showStatus, inst.id, this._get(inst, 'prevStatus'), initStatus) + '>' + prevText + '</a>' :
    1405                         (hideIfNoPrevNext ? '' : (showBigPrevNext ? '<label>' + prevBigText + '</label>' : '') +
    1406                         '<label>' + prevText + '</label>')) + '</div>';
     1364                var prev = (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ?
     1365                        '<a class="ui-datepicker-prev ui-corner-all" onclick="jQuery.datepicker._adjustDate(\'#' + inst.id + '\', -' + stepMonths + ', \'M\');"' +
     1366                        this._addStatus(showStatus, inst.id, this._get(inst, 'prevStatus'), initStatus) + ' title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-w">' + prevText + '</span></a>' :
     1367                        (hideIfNoPrevNext ? '' : '<label>' + prevText + '</label>'));
    14071368                var nextText = this._get(inst, 'nextText');
    14081369                nextText = (!navigationAsDateFormat ? nextText : this.formatDate(nextText,
    14091370                        this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepMonths, 1)),
    14101371                        this._getFormatConfig(inst)));
    1411                 var nextBigText = (showBigPrevNext ? this._get(inst, 'nextBigText') : '');
    1412                 nextBigText = (!navigationAsDateFormat ? nextBigText : this.formatDate(nextBigText,
    1413                         this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepBigMonths, 1)),
    1414                         this._getFormatConfig(inst)));
    1415                 var next = '<div class="ui-datepicker-next">' + (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ?
    1416                         '<a onclick="jQuery.datepicker._adjustDate(\'#' + inst.id + '\', +' + stepMonths + ', \'M\');"' +
    1417                         this._addStatus(showStatus, inst.id, this._get(inst, 'nextStatus'), initStatus) + '>' + nextText + '</a>' +
    1418                         (showBigPrevNext ? '<a onclick="jQuery.datepicker._adjustDate(\'#' + inst.id + '\', +' + stepBigMonths + ', \'M\');"' +
    1419                         this._addStatus(showStatus, inst.id, this._get(inst, 'nextBigStatus'), initStatus) + '>' + nextBigText + '</a>' : '') :
    1420                         (hideIfNoPrevNext ? '' : '<label>' + nextText + '</label>' +
    1421                         (showBigPrevNext ? '<label>' + nextBigText + '</label>' : ''))) + '</div>';
     1372                var next = (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ?
     1373                        '<a class="ui-datepicker-next ui-corner-all" onclick="jQuery.datepicker._adjustDate(\'#' + inst.id + '\', +' + stepMonths + ', \'M\');"' +
     1374                        this._addStatus(showStatus, inst.id, this._get(inst, 'nextStatus'), initStatus) + ' title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-e">' + nextText + '</span></a>' :
     1375                        (hideIfNoPrevNext ? '' : '<label>' + nextText + '</label>'));
    14221376                var currentText = this._get(inst, 'currentText');
    14231377                var gotoDate = (this._get(inst, 'gotoCurrent') && inst.currentDay ? currentDate : today);
    14241378                currentText = (!navigationAsDateFormat ? currentText :
    14251379                        this.formatDate(currentText, gotoDate, this._getFormatConfig(inst)));
    1426                 var html = (closeAtTop && !inst.inline ? controls : '') +
    1427                         '<div class="ui-datepicker-links">' + (isRTL ? next : prev) +
    1428                         (this._isInRange(inst, gotoDate) ? '<div class="ui-datepicker-current">' +
    1429                         '<a onclick="jQuery.datepicker._gotoToday(\'#' + inst.id + '\');"' +
     1380
     1381                // build the date picker HTML
     1382                var controls = '<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" onclick="jQuery.datepicker._hideDatepicker();"' +
     1383                        this._addStatus(showStatus, inst.id, this._get(inst, 'closeStatus'), initStatus) + '>' +
     1384                        this._get(inst, 'closeText') + '</button>';
     1385                // HTML for button pane
     1386                var buttonPanel = (showButtonPanel) ? '<div class="ui-datepicker-buttonpane ui-widget-content">' + (isRTL ? controls : '') +
     1387                        (this._isInRange(inst, gotoDate) ? '<button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" onclick="jQuery.datepicker._gotoToday(\'#' + inst.id + '\');"' +
    14301388                        this._addStatus(showStatus, inst.id, this._get(inst, 'currentStatus'), initStatus) + '>' +
    1431                         currentText + '</a></div>' : '') + (isRTL ? prev : next) + '</div>' +
    1432                         (prompt ? '<div class="' + this._promptClass + '"><span>' + prompt + '</span></div>' : '');
     1389                        currentText + '</button>' : '') + (isRTL ? '' : controls) + '</div>' : '';
     1390                                       
    14331391                var firstDay = parseInt(this._get(inst, 'firstDay'));
    14341392                firstDay = (isNaN(firstDay) ? 0 : firstDay);
    14351393                var changeFirstDay = this._get(inst, 'changeFirstDay');
     
    14401398                var beforeShowDay = this._get(inst, 'beforeShowDay');
    14411399                var highlightWeek = this._get(inst, 'highlightWeek');
    14421400                var showOtherMonths = this._get(inst, 'showOtherMonths');
    1443                 var showWeeks = this._get(inst, 'showWeeks');
    14441401                var calculateWeek = this._get(inst, 'calculateWeek') || this.iso8601Week;
    14451402                var weekStatus = this._get(inst, 'weekStatus');
    14461403                var status = (showStatus ? this._get(inst, 'dayStatus') || initStatus : '');
     
    14481405                var endDate = inst.endDay ? this._daylightSavingAdjust(
    14491406                        new Date(inst.endYear, inst.endMonth, inst.endDay)) : currentDate;
    14501407                var defaultDate = this._getDefaultDate(inst);
    1451                 for (var row = 0; row < numMonths[0]; row++)
     1408
     1409                var html = '';         
     1410                for (var row = 0; row < numMonths[0]; row++) {
    14521411                        for (var col = 0; col < numMonths[1]; col++) {
    14531412                                var selectedDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, inst.selectedDay));
    1454                                 html += '<div class="ui-datepicker-one-month' + (col == 0 ? ' ui-datepicker-new-row' : '') + '">' +
     1413                                var cornerClass = ' ui-corner-all';
     1414                                if (isMultiMonth) {
     1415                                        html += '<div class="ui-datepicker-group ui-datepicker-group-';
     1416                                        switch (col) {
     1417                                                case 0: html += 'first'; cornerClass = ' ui-corner-left'; break;
     1418                                                case numMonths[1]-1: html += 'last'; cornerClass = ' ui-corner-right'; break;
     1419                                                default: html += 'middle'; cornerClass = ''; break;
     1420                                        }
     1421                                        html += '">';
     1422                                }
     1423                                html += '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix' + cornerClass + '">' +
     1424                                        (/all|left/.test(cornerClass) ? (isRTL ? next : prev) : '') +
     1425                                        (/all|right/.test(cornerClass) ? (isRTL ? prev : next) : '') +
     1426                                        (prompt ? '<div class="' + this._promptClass + '"><span>' + prompt + '</span></div>' : '') +
    14551427                                        this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
    14561428                                        selectedDate, row > 0 || col > 0, showStatus, initStatus, monthNames) + // draw month headers
    1457                                         '<table class="ui-datepicker" cellpadding="0" cellspacing="0"><thead>' +
    1458                                         '<tr class="ui-datepicker-title-row">' +
    1459                                         (showWeeks ? '<td' + this._addStatus(showStatus, inst.id, weekStatus, initStatus) + '>' +
    1460                                         this._get(inst, 'weekHeader') + '</td>' : '');
     1429                                        '</div><table class="ui-datepicker-calendar"><thead>' +
     1430                                        '<tr>';
    14611431                                for (var dow = 0; dow < 7; dow++) { // days of the week
    14621432                                        var day = (dow + firstDay) % 7;
    14631433                                        var dayStatus = (status.indexOf('DD') > -1 ? status.replace(/DD/, dayNames[day]) :
    14641434                                                status.replace(/D/, dayNamesShort[day]));
    1465                                         html += '<td' + ((dow + firstDay + 6) % 7 >= 5 ? ' class="ui-datepicker-week-end-cell"' : '') + '>' +
     1435                                        html += '<th' + ((dow + firstDay + 6) % 7 >= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' +
    14661436                                                (!changeFirstDay ? '<span' :
    14671437                                                '<a onclick="jQuery.datepicker._changeFirstDay(\'#' + inst.id + '\', ' + day + ');"') +
    14681438                                                this._addStatus(showStatus, inst.id, dayStatus, initStatus) + ' title="' + dayNames[day] + '">' +
    1469                                                 dayNamesMin[day] + (changeFirstDay ? '</a>' : '</span>') + '</td>';
     1439                                                dayNamesMin[day] + (changeFirstDay ? '</a>' : '</span>') + '</th>';
    14701440                                }
    14711441                                html += '</tr></thead><tbody>';
    14721442                                var daysInMonth = this._getDaysInMonth(drawYear, drawMonth);
     
    14761446                                var numRows = (isMultiMonth ? 6 : Math.ceil((leadDays + daysInMonth) / 7)); // calculate the number of rows to generate
    14771447                                var printDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1 - leadDays));
    14781448                                for (var dRow = 0; dRow < numRows; dRow++) { // create date picker rows
    1479                                         html += '<tr class="ui-datepicker-days-row">' +
    1480                                                 (showWeeks ? '<td class="ui-datepicker-week-col"' +
    1481                                                 this._addStatus(showStatus, inst.id, weekStatus, initStatus) + '>' +
    1482                                                 calculateWeek(printDate) + '</td>' : '');
     1449                                        html += '<tr>';
    14831450                                        for (var dow = 0; dow < 7; dow++) { // create date picker days
    14841451                                                var daySettings = (beforeShowDay ?
    14851452                                                        beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']);
    14861453                                                var otherMonth = (printDate.getMonth() != drawMonth);
    14871454                                                var unselectable = otherMonth || !daySettings[0] ||
    14881455                                                        (minDate && printDate < minDate) || (maxDate && printDate > maxDate);
    1489                                                 html += '<td class="ui-datepicker-days-cell' +
    1490                                                         ((dow + firstDay + 6) % 7 >= 5 ? ' ui-datepicker-week-end-cell' : '') + // highlight weekends
     1456                                                html += '<td class="' +
     1457                                                        ((dow + firstDay + 6) % 7 >= 5 ? ' ui-datepicker-week-end' : '') + // highlight weekends
    14911458                                                        (otherMonth ? ' ui-datepicker-other-month' : '') + // highlight days from other months
    14921459                                                        ((printDate.getTime() == selectedDate.getTime() && drawMonth == inst.selectedMonth && inst._keyEvent) || // user pressed key
    14931460                                                        (defaultDate.getTime() == printDate.getTime() && defaultDate.getTime() == selectedDate.getTime()) ?
    14941461                                                        // or defaultDate is current printedDate and defaultDate is selectedDate
    14951462                                                        ' ' + $.datepicker._dayOverClass : '') + // highlight selected day
    1496                                                         (unselectable ? ' ' + this._unselectableClass : '') +  // highlight unselectable days
     1463                                                        (unselectable ? ' ui-state-disabled ' + this._unselectableClass : '') +  // highlight unselectable days
    14971464                                                        (otherMonth && !showOtherMonths ? '' : ' ' + daySettings[1] + // highlight custom dates
    14981465                                                        (printDate.getTime() >= currentDate.getTime() && printDate.getTime() <= endDate.getTime() ? // in current range
    14991466                                                        ' ' + this._currentClass : '') + // highlight selected day
    15001467                                                        (printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + // highlight today (if different)
    15011468                                                        ((!otherMonth || showOtherMonths) && daySettings[2] ? ' title="' + daySettings[2] + '"' : '') + // cell title
    1502                                                         (unselectable ? (highlightWeek ? ' onmouseover="jQuery(this).parent().addClass(\'' + this._weekOverClass + '\');"' + // highlight selection week
    1503                                                         ' onmouseout="jQuery(this).parent().removeClass(\'' + this._weekOverClass + '\');"' : '') : // unhighlight selection week
     1469                                                        (unselectable ? '' : '<a href="#" class="ui-state-default'+
     1470                                                                (printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +
     1471                                                                (printDate.getTime() >= currentDate.getTime() && printDate.getTime() <= endDate.getTime() ? // in current range
     1472                                                                ' ui-state-active' : '') +
     1473                                                        '"') +
     1474                                                        (unselectable ? (highlightWeek ? ' onmouseover="jQuery(this).parent().parent().addClass(\'' + this._weekOverClass + '\');"' + // highlight selection week
     1475                                                        ' onmouseout="jQuery(this).parent().parent().removeClass(\'' + this._weekOverClass + '\');"' : '') : // unhighlight selection week
    15041476                                                        ' onmouseover="jQuery(this).addClass(\'' + this._dayOverClass + '\')' + // highlight selection
    1505                                                         (highlightWeek ? '.parent().addClass(\'' + this._weekOverClass + '\')' : '') + ';' + // highlight selection week
     1477                                                        (highlightWeek ? '.parent().parent().addClass(\'' + this._weekOverClass + '\')' : '') + ';' + // highlight selection week
    15061478                                                        (!showStatus || (otherMonth && !showOtherMonths) ? '' : 'jQuery(\'#ui-datepicker-status-' +
    15071479                                                        inst.id + '\').html(\'' + (dateStatus.apply((inst.input ? inst.input[0] : null),
    15081480                                                        [printDate, inst]) || initStatus) +'\');') + '"' +
    15091481                                                        ' onmouseout="jQuery(this).removeClass(\'' + this._dayOverClass + '\')' + // unhighlight selection
    1510                                                         (highlightWeek ? '.parent().removeClass(\'' + this._weekOverClass + '\')' : '') + ';' + // unhighlight selection week
     1482                                                        (highlightWeek ? '.parent().parent().removeClass(\'' + this._weekOverClass + '\')' : '') + ';' + // unhighlight selection week
    15111483                                                        (!showStatus || (otherMonth && !showOtherMonths) ? '' : 'jQuery(\'#ui-datepicker-status-' +
    15121484                                                        inst.id + '\').html(\'' + initStatus + '\');') + '" onclick="jQuery.datepicker._selectDay(\'#' +
    1513                                                         inst.id + '\',' + drawMonth + ',' + drawYear + ', this);"') + '>' + // actions
     1485                                                        inst.id + '\',' + drawMonth + ',' + drawYear + ', jQuery(this).parent()[0]);"') + '>' + // actions
    15141486                                                        (otherMonth ? (showOtherMonths ? printDate.getDate() : '&#xa0;') : // display for other months
    1515                                                         (unselectable ? printDate.getDate() : '<a>' + printDate.getDate() + '</a>')) + '</td>'; // display for this month
     1487                                                        (unselectable ? printDate.getDate() : printDate.getDate() + '')) + (unselectable ? '' : '</a>') + '</td>'; // display for this month
    15161488                                                printDate.setDate(printDate.getDate() + 1);
    15171489                                                printDate = this._daylightSavingAdjust(printDate);
    15181490                                        }
     
    15231495                                        drawMonth = 0;
    15241496                                        drawYear++;
    15251497                                }
    1526                                 html += '</tbody></table></div>';
     1498                                html += '</tbody></table>' + (isMultiMonth ? '</div>' : '');
    15271499                        }
    1528                 html += (showStatus ? '<div style="clear: both;"></div><div id="ui-datepicker-status-' + inst.id +
    1529                         '" class="ui-datepicker-status">' + initStatus + '</div>' : '') +
    1530                         (!closeAtTop && !inst.inline ? controls : '') +
    1531                         '<div style="clear: both;"></div>' +
     1500                }
     1501                // HTML for button panel
     1502                html += (!inst.inline ? buttonPanel : '') +
    15321503                        ($.browser.msie && parseInt($.browser.version,10) < 7 && !inst.inline ?
    15331504                        '<iframe src="javascript:false;" class="ui-datepicker-cover"></iframe>' : '');
     1505               
    15341506                inst._keyEvent = false;
    15351507                return html;
    15361508        },
     
    15421514                var changeMonth = this._get(inst, 'changeMonth');
    15431515                var changeYear = this._get(inst, 'changeYear');
    15441516                var showMonthAfterYear = this._get(inst, 'showMonthAfterYear');
    1545                 var html = '<div class="ui-datepicker-header">';
     1517                var html = '<div class="ui-datepicker-title">';
    15461518                var monthHtml = '';
    15471519                // month selection
    15481520                if (secondary || !changeMonth)
    1549                         monthHtml += monthNames[drawMonth];
     1521                        monthHtml += '<span class="ui-datepicker-month">' + monthNames[drawMonth] + '</span> ';
    15501522                else {
    15511523                        var inMinYear = (minDate && minDate.getFullYear() == drawYear);
    15521524                        var inMaxYear = (maxDate && maxDate.getFullYear() == drawYear);
    1553                         monthHtml += '<select class="ui-datepicker-new-month" ' +
     1525                        monthHtml += '<select class="ui-datepicker-month" ' +
    15541526                                'onchange="jQuery.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'M\');" ' +
    15551527                                'onclick="jQuery.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
    15561528                                this._addStatus(showStatus, inst.id, this._get(inst, 'monthStatus'), initStatus) + '>';
     
    15671539                        html += monthHtml + (secondary || changeMonth || changeYear ? '&#xa0;' : '');
    15681540                // year selection
    15691541                if (secondary || !changeYear)
    1570                         html += drawYear;
     1542                        html += '<span class="ui-datepicker-year">' + drawYear + '</span>';
    15711543                else {
    15721544                        // determine range of years to display
    15731545                        var years = this._get(inst, 'yearRange').split(':');
     
    15861558                        }
    15871559                        year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
    15881560                        endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
    1589                         html += '<select class="ui-datepicker-new-year" ' +
     1561                        html += '<select class="ui-datepicker-year" ' +
    15901562                                'onchange="jQuery.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
    15911563                                'onclick="jQuery.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
    15921564                                this._addStatus(showStatus, inst.id, this._get(inst, 'yearStatus'), initStatus) + '>';