Introduction
While working on a legacy code base recently, I was facing an issue with the jQuery Datepicker
.
For some reason, our customer's code is stuck with jquery-ui-1.8.13.custom.min.js. And the browser mandated for the application is Internet Explorer 9 with compatibility view with Internet Explorer 8 standards.
Issue
Load up a page with a Datepicker
in it, with both the year and month dropdowns enabled. Click on one of the year/month dropdown lists, it appears and disappears. Click it again and it appears correctly.
After being clueless for a few minutes, I realized some event is getting triggered right after the click event that is causing the dropdown list to collapse. Then I noticed this:
<select class="ui-datepicker-year" onclick="DP_jQuery_1378903097959.datepicker._clickMonthYear
('#dp1378903097961');" onchange="DP_jQuery_1378903097959.datepicker._selectMonthYear('#dp1378903097961', this, 'Y');">
Reason
So the problem is jQuery Datepicker
is binding two methods to the onchange
and onclick
events of the select
. When I dug more, I found this:
_clickMonthYear: function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (inst.input && inst._selectingMonthYear) {
setTimeout(function() {
inst.input.focus();
}, 0);
}
inst._selectingMonthYear = !inst._selectingMonthYear;},
Hack
So I figured a quick hack is to get rid of the onclick
method body in the plugin code itself. I could do that in the minified file (do it only if you know what you are doing!). Then a co-worker showed an even lower impact change, which is to remove the setTimeout()
function body portion only – which, if doesn't break any of your existing functionality, is better.
On searching more, I found that this is an issue with that version of the plugin tracked here but I am not sure which version has the fix.
Solution
Ideally, I should override the onclick
method using something like this. I am yet to try it because I have the "we-will-refactor-later" syndrome.