Datepicker: Pulled event handlers into static code. Fixed #3945 - DatePicker does not respond to any click events in AIR, Google Sites, Windows Metro.

(cherry picked from commit 6dcc5c14c8)
This commit is contained in:
Mike Stay 2012-06-06 09:59:15 -04:00 committed by Scott González
parent 800ceb3794
commit 831333a10a

View File

@ -714,6 +714,7 @@ $.extend(Datepicker.prototype, {
var borders = $.datepicker._getBorders(inst.dpDiv); var borders = $.datepicker._getBorders(inst.dpDiv);
instActive = inst; // for delegate hover events instActive = inst; // for delegate hover events
inst.dpDiv.empty().append(this._generateHTML(inst)); inst.dpDiv.empty().append(this._generateHTML(inst));
this._attachHandlers(inst);
var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6 if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6
cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()}) cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
@ -1402,6 +1403,43 @@ $.extend(Datepicker.prototype, {
return startDate; return startDate;
}, },
/* Attach the onxxx handlers. These are declared statically so
* they work with static code transformers like Caja.
*/
_attachHandlers: function(inst) {
var stepMonths = this._get(inst, 'stepMonths');
var id = '#' + inst.id;
inst.dpDiv.find('[data-handler]').map(function () {
var handler = {
prev: function () {
window['DP_jQuery_' + dpuuid].datepicker._adjustDate(id, -stepMonths, 'M');
},
next: function () {
window['DP_jQuery_' + dpuuid].datepicker._adjustDate(id, +stepMonths, 'M');
},
hide: function () {
window['DP_jQuery_' + dpuuid].datepicker._hideDatepicker();
},
today: function () {
window['DP_jQuery_' + dpuuid].datepicker._gotoToday(id);
},
selectDay: function () {
window['DP_jQuery_' + dpuuid].datepicker._selectDay(id, +this.getAttribute('data-month'), +this.getAttribute('data-year'), this);
return false;
},
selectMonth: function () {
window['DP_jQuery_' + dpuuid].datepicker._selectMonthYear(id, this, 'M');
return false;
},
selectYear: function () {
window['DP_jQuery_' + dpuuid].datepicker._selectMonthYear(id, this, 'Y');
return false;
}
};
$(this).bind(this.getAttribute('data-event'), handler[this.getAttribute('data-handler')]);
});
},
/* Generate the HTML for the current state of the date picker. */ /* Generate the HTML for the current state of the date picker. */
_generateHTML: function(inst) { _generateHTML: function(inst) {
var today = new Date(); var today = new Date();
@ -1444,8 +1482,7 @@ $.extend(Datepicker.prototype, {
this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepMonths, 1)), this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepMonths, 1)),
this._getFormatConfig(inst))); this._getFormatConfig(inst)));
var prev = (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ? var prev = (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ?
'<a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_' + dpuuid + '<a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click"' +
'.datepicker._adjustDate(\'#' + inst.id + '\', -' + stepMonths + ', \'M\');"' +
' title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>' : ' title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>' :
(hideIfNoPrevNext ? '' : '<a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="'+ prevText +'"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>')); (hideIfNoPrevNext ? '' : '<a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="'+ prevText +'"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>'));
var nextText = this._get(inst, 'nextText'); var nextText = this._get(inst, 'nextText');
@ -1453,19 +1490,17 @@ $.extend(Datepicker.prototype, {
this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepMonths, 1)), this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepMonths, 1)),
this._getFormatConfig(inst))); this._getFormatConfig(inst)));
var next = (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ? var next = (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ?
'<a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_' + dpuuid + '<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click"' +
'.datepicker._adjustDate(\'#' + inst.id + '\', +' + stepMonths + ', \'M\');"' +
' title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>' : ' title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>' :
(hideIfNoPrevNext ? '' : '<a class="ui-datepicker-next ui-corner-all ui-state-disabled" title="'+ nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>')); (hideIfNoPrevNext ? '' : '<a class="ui-datepicker-next ui-corner-all ui-state-disabled" title="'+ nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>'));
var currentText = this._get(inst, 'currentText'); var currentText = this._get(inst, 'currentText');
var gotoDate = (this._get(inst, 'gotoCurrent') && inst.currentDay ? currentDate : today); var gotoDate = (this._get(inst, 'gotoCurrent') && inst.currentDay ? currentDate : today);
currentText = (!navigationAsDateFormat ? currentText : currentText = (!navigationAsDateFormat ? currentText :
this.formatDate(currentText, gotoDate, this._getFormatConfig(inst))); this.formatDate(currentText, gotoDate, this._getFormatConfig(inst)));
var controls = (!inst.inline ? '<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" onclick="DP_jQuery_' + dpuuid + var controls = (!inst.inline ? '<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">' +
'.datepicker._hideDatepicker();">' + this._get(inst, 'closeText') + '</button>' : ''); this._get(inst, 'closeText') + '</button>' : '');
var buttonPanel = (showButtonPanel) ? '<div class="ui-datepicker-buttonpane ui-widget-content">' + (isRTL ? controls : '') + var buttonPanel = (showButtonPanel) ? '<div class="ui-datepicker-buttonpane ui-widget-content">' + (isRTL ? controls : '') +
(this._isInRange(inst, gotoDate) ? '<button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" onclick="DP_jQuery_' + dpuuid + (this._isInRange(inst, gotoDate) ? '<button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" data-handler="today" data-event="click"' +
'.datepicker._gotoToday(\'#' + inst.id + '\');"' +
'>' + currentText + '</button>' : '') + (isRTL ? '' : controls) + '</div>' : ''; '>' + currentText + '</button>' : '') + (isRTL ? '' : controls) + '</div>' : '';
var firstDay = parseInt(this._get(inst, 'firstDay'),10); var firstDay = parseInt(this._get(inst, 'firstDay'),10);
firstDay = (isNaN(firstDay) ? 0 : firstDay); firstDay = (isNaN(firstDay) ? 0 : firstDay);
@ -1544,8 +1579,7 @@ $.extend(Datepicker.prototype, {
(printDate.getTime() == currentDate.getTime() ? ' ' + this._currentClass : '') + // highlight selected day (printDate.getTime() == currentDate.getTime() ? ' ' + this._currentClass : '') + // highlight selected day
(printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + // highlight today (if different) (printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + // highlight today (if different)
((!otherMonth || showOtherMonths) && daySettings[2] ? ' title="' + daySettings[2] + '"' : '') + // cell title ((!otherMonth || showOtherMonths) && daySettings[2] ? ' title="' + daySettings[2] + '"' : '') + // cell title
(unselectable ? '' : ' onclick="DP_jQuery_' + dpuuid + '.datepicker._selectDay(\'#' + (unselectable ? '' : ' data-handler="selectDay" data-event="click" data-month="' + printDate.getMonth() + '" data-year="' + printDate.getFullYear() + '"') + '>' + // actions
inst.id + '\',' + printDate.getMonth() + ',' + printDate.getFullYear() + ', this);return false;"') + '>' + // actions
(otherMonth && !showOtherMonths ? '&#xa0;' : // display for other months (otherMonth && !showOtherMonths ? '&#xa0;' : // display for other months
(unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' + (unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' +
(printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + (printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +
@ -1588,9 +1622,7 @@ $.extend(Datepicker.prototype, {
else { else {
var inMinYear = (minDate && minDate.getFullYear() == drawYear); var inMinYear = (minDate && minDate.getFullYear() == drawYear);
var inMaxYear = (maxDate && maxDate.getFullYear() == drawYear); var inMaxYear = (maxDate && maxDate.getFullYear() == drawYear);
monthHtml += '<select class="ui-datepicker-month" ' + monthHtml += '<select class="ui-datepicker-month" data-handler="selectMonth" data-event="change">';
'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'M\');" ' +
'>';
for (var month = 0; month < 12; month++) { for (var month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) && if ((!inMinYear || month >= minDate.getMonth()) &&
(!inMaxYear || month <= maxDate.getMonth())) (!inMaxYear || month <= maxDate.getMonth()))
@ -1621,9 +1653,7 @@ $.extend(Datepicker.prototype, {
var endYear = Math.max(year, determineYear(years[1] || '')); var endYear = Math.max(year, determineYear(years[1] || ''));
year = (minDate ? Math.max(year, minDate.getFullYear()) : year); year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear); endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
inst.yearshtml += '<select class="ui-datepicker-year" ' + inst.yearshtml += '<select class="ui-datepicker-year" data-handler="selectYear" data-event="change">';
'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
'>';
for (; year <= endYear; year++) { for (; year <= endYear; year++) {
inst.yearshtml += '<option value="' + year + '"' + inst.yearshtml += '<option value="' + year + '"' +
(year == drawYear ? ' selected="selected"' : '') + (year == drawYear ? ' selected="selected"' : '') +