TypeError:在Jquery ui datepicker中未定义datepicker_instActive

TypeError: datepicker_instActive is undefined in Jquery-ui Datepicker

本文关键字:datepicker 未定义 instActive ui Jquery TypeError      更新时间:2023-09-26

我已经构建了rails+angular应用程序。在这篇文章中,我使用了jquery ui日期选择器。我没有找到在控制台中出现此错误的解决方案:

TypeError:datepicker_instActive未定义

if(!$.datepicker.isDisabledDatepicker(datepicker_instActive.inline?日期选择。。。

在控制台中。

我的css版本是jQuery UI Datepicker 1.11.2并且CCD_ 3也是相同的。jQuery UI Datepicker 1.11.2

当我在日期选择器小部件上移动光标时,相同错误计数的数量会增加。

我认为问题在于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");
        }
    }
}

你们曾经面临过同样的问题吗?或者我该如何解决它。我使用了引导模式弹出窗口,在这种形式下我使用了日期选择器。

jQuery UI 1.11.4中的问题相同。我们刚刚创建了一个bug票证http://bugs.jqueryui.com/ticket/14578希望jQuery团队尽快解决这个问题。

要解决问题,只需

  • 通过自定义下载从jQuery UI站点仅下载日期选择器组件(https://jqueryui.com/download/)
  • 从ZIP档案中提取jquery-ui.js并重命名,例如jquery-ui-1.11.4-datepicker-fix.js
  • 在模板中的完整jQuery UI脚本之后立即嵌入该脚本,并且
  • 在函数datepicker_handleMouseover()的第一行添加一个空校验,如下所示:

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

不需要对代码进行进一步的更改。只要从模板中删除脚本标记,就可以在修复错误后轻松删除补丁。

请注意,此解决方法完全覆盖原始日期选择器插件

我在两次包含jquery ui时遇到了这个错误。删除任一实例都解决了问题。

销毁日期选择器后,在另一个日期选择器上调用refresh会再次设置datepicker_instActive,这可能是比修改外部插件代码更容易接受的解决方法:

// 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');

以下是票证中更新的Fiddle,用于演示解决方法。