CODEWITHSUNDEEP
javascriptjqueryclickdatepickerfocus
inimrepus
inimrepus

Reputation: 69

Using focus or click with a datepicker in IE

I am having an issue with my datepicker in IE8+. This code works in all other browsers that I have tried, but unfortunately out client only uses IE8.

What is happening is that when the you click on the field it will bring up the datepicker. When you try to select a date however, the datepicker just gets bigger every time you click on it and never actually selects the date.

If I use click instead of focus it will work, but you need to click into the field and then out of it again before it will bring up the datepicker.

I would really appreciate any help I could get with this. I have included my code below.

$(document).ready(function () {
    $("body").on("focus", ".datepick", (function () {
        $(this).datepick({
            dateFormat: "yyyy-mm-dd",
            rangeSelect: true
        });
    }));
});

Upvotes: 0

Views: 350

Answers (2)

Ross
Ross

Reputation: 3070

This is because the focus event does not bubble in Internet Explorer, per the jQuery docs:

The focus event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the focus event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping focus to the focusin event in its event delegation methods, .live() and .delegate().

Try binding to focusin instead:

$(document).ready(function () {
    $("body").on("focusin", ".datepick", (function () {
        $(this).datepicker({
            dateFormat: "yyyy-mm-dd",
            rangeSelect: true
        });
    }));
});

Upvotes: 1

J E Carter II
J E Carter II

Reputation: 1506

If you use the jquery ui datepicker, the compatibility issue should be taken care of for you. I'me using it with IE8 without issue. Then your code is just:

$(document).ready(function(){ $('.datepick').datepicker();});

Upvotes: 0

Related Questions