CODEWITHSUNDEEP
javascriptjqueryangularjsjquery-uidatepicker
Hetal Khunti
Hetal Khunti

Reputation: 807

TypeError: datepicker_instActive is undefined in Jquery-ui Datepicker

I have built rails + angular app. In this I have used jquery-ui datepicker. I didn't find the solution why I get this error in console:

TypeError: datepicker_instActive is undefined

if(!$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? datepicke...

in console.

My versions of css is jQuery UI Datepicker 1.11.2 and js is also the same. jQuery UI Datepicker 1.11.2

And when I move my cursor on datepicker widget no.of same error counts are increased.

I think issue is in this function of Jquery:

function datepicker_handleMouseover() {
    if (!$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? datepicker_instActive.dpDiv.parent()[0] : datepicker_instActive.input[0])) {
        $(this).parents(".ui-datepicker-calendar").find("a").removeClass("ui-state-hover");
        $(this).addClass("ui-state-hover");
        if (this.className.indexOf("ui-datepicker-prev") !== -1) {
            $(this).addClass("ui-datepicker-prev-hover");
        }
        if (this.className.indexOf("ui-datepicker-next") !== -1) {
            $(this).addClass("ui-datepicker-next-hover");
        }
    }
}

Do you have face same issue ever? Or any idea how can I resolve it. I have used bootstrap-modal popup and in that form I used datepicker.

Upvotes: 2

Views: 2659

Answers (3)

blu
blu

Reputation: 372

I encountered this error when I included jquery-ui twice. Removing either instance resolved it.

Upvotes: 2

Joe
Joe

Reputation: 16841

After destroying a datepicker, calling refresh on another datepicker sets datepicker_instActive again, which might be a more acceptable workaround than modifying external plugin code:

// Delete a datepicker
$('#date1').datepicker('destroy');

// WORKAROUND: Refresh another datepicker until the following is fixed
// http://bugs.jqueryui.com/ticket/14578
$('.hasDatepicker').last().datepicker('refresh');

Here's an updated Fiddle from the ticket to demonstrate the workaround.

Upvotes: 1

Oxolotl
Oxolotl

Reputation: 443

Same issue here in jQuery UI 1.11.4. We just created a bug ticket http://bugs.jqueryui.com/ticket/14578 and hope this is fixed soon by the jQuery team.

To workaround the problem, just

  • download only the datepicker component from the jQuery UI site via custom download (https://jqueryui.com/download/),
  • Extract jquery-ui.js from the ZIP archive and rename it, e.g. jquery-ui-1.11.4-datepicker-fix.js
  • embed the script right after your full jQuery UI script in your template(s), and

  • add a null-check to the first line of function datepicker_handleMouseover() as follows:

    function datepicker_handleMouseover() {
    if (!datepicker_instActive || !$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? datepicker_instActive.dpDiv.parent()[0] : datepicker_instActive.input[0])) {
    ...
}

No further changes to your code should be required. The patch can easily be removed when the bug has been fixed by simply removing the script tag from your templates.

Note that this workaround completely overwrites the original datepicker plugin.

Upvotes: 2

Related Questions