diff options
-rw-r--r-- | tests/visual/datepicker.html | 2 | ||||
-rw-r--r-- | themes/base/ui.datepicker.css | 10 | ||||
-rw-r--r-- | ui/ui.datepicker.js | 39 |
3 files changed, 33 insertions, 18 deletions
diff --git a/tests/visual/datepicker.html b/tests/visual/datepicker.html index 8b51b4c13..214c2c8e5 100644 --- a/tests/visual/datepicker.html +++ b/tests/visual/datepicker.html @@ -11,7 +11,7 @@ $(function() { $('#d1').datepicker(); $('#d2').datepicker({numberOfMonths: 3, showButtonPanel: true}); - $('#inl').datepicker({changeFirstDay: true}); + $('#inl').datepicker(); }); </script> </head> diff --git a/themes/base/ui.datepicker.css b/themes/base/ui.datepicker.css index bfb3fb57c..4df2e7e2a 100644 --- a/themes/base/ui.datepicker.css +++ b/themes/base/ui.datepicker.css @@ -32,4 +32,12 @@ .ui-datepicker-multi-4 .ui-datepicker-group { width:25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left:0; } .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left:0; } -.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
\ No newline at end of file +.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; } + +/* RTL support */ +.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } +.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } +.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } +.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } +.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } +.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
\ No newline at end of file diff --git a/ui/ui.datepicker.js b/ui/ui.datepicker.js index bf607250e..66d71f00f 100644 --- a/ui/ui.datepicker.js +++ b/ui/ui.datepicker.js @@ -1343,7 +1343,7 @@ $.extend(Datepicker.prototype, { this._getFormatConfig(inst))); var prev = (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ? '<a class="ui-datepicker-prev ui-corner-all" onclick="jQuery.datepicker._adjustDate(\'#' + inst.id + '\', -' + stepMonths + ', \'M\');"' + - ' title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-w">' + prevText + '</span></a>' : + ' title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>' : (hideIfNoPrevNext ? '' : '<label>' + prevText + '</label>')); var nextText = this._get(inst, 'nextText'); nextText = (!navigationAsDateFormat ? nextText : this.formatDate(nextText, @@ -1351,7 +1351,7 @@ $.extend(Datepicker.prototype, { this._getFormatConfig(inst))); var next = (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ? '<a class="ui-datepicker-next ui-corner-all" onclick="jQuery.datepicker._adjustDate(\'#' + inst.id + '\', +' + stepMonths + ', \'M\');"' + - ' title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-e">' + nextText + '</span></a>' : + ' title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>' : (hideIfNoPrevNext ? '' : '<label>' + nextText + '</label>')); var currentText = this._get(inst, 'currentText'); var gotoDate = (this._get(inst, 'gotoCurrent') && inst.currentDay ? currentDate : today); @@ -1375,31 +1375,34 @@ $.extend(Datepicker.prototype, { var defaultDate = this._getDefaultDate(inst); var html = ''; for (var row = 0; row < numMonths[0]; row++) { + var group = ''; for (var col = 0; col < numMonths[1]; col++) { var selectedDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, inst.selectedDay)); var cornerClass = ' ui-corner-all'; + var calender = ''; if (isMultiMonth) { - html += '<div class="ui-datepicker-group ui-datepicker-group-'; + calender += '<div class="ui-datepicker-group ui-datepicker-group-'; switch (col) { - case 0: html += 'first'; cornerClass = ' ui-corner-left'; break; - case numMonths[1]-1: html += 'last'; cornerClass = ' ui-corner-right'; break; - default: html += 'middle'; cornerClass = ''; break; + case 0: calender += 'first'; cornerClass = ' ui-corner-' + (isRTL ? 'right' : 'left'); break; + case numMonths[1]-1: calender += 'last'; cornerClass = ' ui-corner-' + (isRTL ? 'left' : 'right'); break; + default: calender += 'middle'; cornerClass = ''; break; } - html += '">'; + calender += '">'; } - html += '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix' + cornerClass + '">' + + calender += '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix' + cornerClass + '">' + (/all|left/.test(cornerClass) ? (isRTL ? next : prev) : '') + (/all|right/.test(cornerClass) ? (isRTL ? prev : next) : '') + this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate, selectedDate, row > 0 || col > 0, monthNames) + // draw month headers '</div><table class="ui-datepicker-calendar"><thead>' + '<tr>'; + var thead = ''; for (var dow = 0; dow < 7; dow++) { // days of the week var day = (dow + firstDay) % 7; - html += '<th' + ((dow + firstDay + 6) % 7 >= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' + - '<span title="' + dayNames[day] + '">' + dayNamesMin[day] + '</span></th>'; + thead = (isRTL ? '' : thead) + '<th' + ((dow + firstDay + 6) % 7 >= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' + + '<span title="' + dayNames[day] + '">' + dayNamesMin[day] + '</span></th>' + (isRTL ? thead : ''); } - html += '</tr></thead><tbody>'; + calender += thead + '</tr></thead><tbody>'; var daysInMonth = this._getDaysInMonth(drawYear, drawMonth); if (drawYear == inst.selectedYear && drawMonth == inst.selectedMonth) inst.selectedDay = Math.min(inst.selectedDay, daysInMonth); @@ -1407,14 +1410,15 @@ $.extend(Datepicker.prototype, { var numRows = (isMultiMonth ? 6 : Math.ceil((leadDays + daysInMonth) / 7)); // calculate the number of rows to generate var printDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1 - leadDays)); for (var dRow = 0; dRow < numRows; dRow++) { // create date picker rows - html += '<tr>'; + calender += '<tr>'; + var tbody = ''; for (var dow = 0; dow < 7; dow++) { // create date picker days var daySettings = (beforeShowDay ? beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']); var otherMonth = (printDate.getMonth() != drawMonth); var unselectable = otherMonth || !daySettings[0] || (minDate && printDate < minDate) || (maxDate && printDate > maxDate); - html += '<td class="' + + tbody = (isRTL ? '' : tbody) + '<td class="' + ((dow + firstDay + 6) % 7 >= 5 ? ' ui-datepicker-week-end' : '') + // highlight weekends (otherMonth ? ' ui-datepicker-other-month' : '') + // highlight days from other months ((printDate.getTime() == selectedDate.getTime() && drawMonth == inst.selectedMonth && inst._keyEvent) || // user pressed key @@ -1434,19 +1438,22 @@ $.extend(Datepicker.prototype, { (printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + (printDate.getTime() >= currentDate.getTime() && printDate.getTime() <= endDate.getTime() ? // in current range ' ui-state-active' : '') + // highlight selected day - '" href="#">' + printDate.getDate() + '</a>')) + '</td>'; // display for this month + '" href="#">' + printDate.getDate() + '</a>')) + '</td>' + // display for this month + (isRTL ? tbody : ''); printDate.setDate(printDate.getDate() + 1); printDate = this._daylightSavingAdjust(printDate); } - html += '</tr>'; + calender += tbody + '</tr>'; } drawMonth++; if (drawMonth > 11) { drawMonth = 0; drawYear++; } - html += '</tbody></table>' + (isMultiMonth ? '</div>' : ''); + calender += '</tbody></table>' + (isMultiMonth ? '</div>' : ''); + group = (isRTL ? calender + group : group + calender ); } + html += group; } html += (!inst.inline ? buttonPanel : '') + ($.browser.msie && parseInt($.browser.version,10) < 7 && !inst.inline ? |