r1196 - in trunk: tests/visual themes/base ui
Author: pazu2k@gmail.com
Date: Sat Dec 20 12:20:33 2008
New Revision: 1196
Modified:
trunk/tests/visual/datepicker.html
trunk/themes/base/ui.datepicker.css
trunk/ui/ui.datepicker.js
Log:
Datepicker #3647: fixed RTL support for new UI markup.
Modified: trunk/tests/visual/datepicker.html
==============================================================================
--- trunk/tests/visual/datepicker.html (original)
+++ trunk/tests/visual/datepicker.html Sat Dec 20 12:20:33 2008
@@ -11,7 +11,7 @@
$(function() {
$('#d1').datepicker();
$('#d2').datepicker({numberOfMonths: 3, showButtonPanel: true});
- $('#inl').datepicker({changeFirstDay: true});
+ $('#inl').datepicker();
});
</script>
</head>
Modified: trunk/themes/base/ui.datepicker.css
==============================================================================
--- trunk/themes/base/ui.datepicker.css (original)
+++ trunk/themes/base/ui.datepicker.css Sat Dec 20 12:20:33 2008
@@ -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
Modified: trunk/ui/ui.datepicker.js
==============================================================================
--- trunk/ui/ui.datepicker.js (original)
+++ trunk/ui/ui.datepicker.js Sat Dec 20 12:20:33 2008
@@ -1343,7 +1343,7 @@
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 @@
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 @@
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 @@
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 @@
(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 ?