JqueryUI Datepicker：未捕获的 TypeError：无法读取未定义的属性“设置”？答案

【问题标题】：JqueryUI Datepicker: Uncaught TypeError: Cannot read property 'settings' of undefined?JqueryUI Datepicker：未捕获的 TypeError：无法读取未定义的属性“设置”？
【发布时间】：2014-01-08 05:46:11
【问题描述】：

我正在开发一个 asp.net MVC4 项目，我在其中使用了很多 JqueryUI 日期选择器。

对于我的一个日期选择器，当我尝试单击日期选择器图像时，我遇到了一些错误，例如，

Uncaught TypeError: Cannot read property 'settings' of undefined                jquery-ui-1.10.3.min.js:9

HTML

<div>
<input type="text" id="tsDte"  style="font-size: 14px;width: 50%" >              
                <img src="~/Images/dayPicker.png" onclick="tsDatePickerClick()" style="vertical-align:bottom"/>
</div>

Javascript

var currentDate = new Date();

$("#tsDte").datepicker({
    dateFormat: 'yy-mm-dd',
    maxDate: 0,
    changeYear: true 
}).attr('readonly', 'readonly');
$("#tsDte").datepicker("setDate", currentDate);


function tsDatePickerClick() {
    $("#tsDte").datepicker('show');
}

这里我有一个文本字段和一个日期选择器图像。当我点击日期选择器图像时，日期选择器将弹出。

我在其他日期选择器中采用了类似的方法，它们工作正常。我对这个日期选择器只有问题。

感谢任何帮助。

【问题讨论】：

看起来不错jsfiddle.net/arunpjohny/CEPth/1
假设你已经使用了 dom 就绪处理程序
没有 dom 就绪处理程序失败 jsfiddle.net/arunpjohny/CEPth/3
是否有必要在所有javascript文件中添加$(document).ready(function()。我的是单页web应用程序。
在我的情况下，它是 jquery 和 jquery ui 库之间的不兼容。 jquery 是 1.9.*，jquery ui 是 1.10.*。更新 jquery 到 1.10.* 后，问题解决了

标签： javascript jquery jquery-ui

【解决方案1】：

如果您尝试在分配了“hasDatepicker”类的输入字段上打开日期选择器，则会显示相同的错误。只需在 html 中删除该类即可。

之前：

<input type="text" value="01/01/2014" class="hasDatepicker">

之后：

<input type="text" value="01/01/2014">

【讨论】：

我的也是 :) 通过 Angular 指令连接时没有显示日期选择器，删除该类以某种方式修复它。
我不敢相信这是我的问题。花了3个多小时！干杯！

【解决方案2】：

我认为您的日期选择器没有正确创建，所以当您调用 show 时，它需要一个 settings 对象。

可能你没有在 $(document).ready 中创建它，你应该有：

$(document).ready(function(){      //Add this line (and it's closing line)
    var currentDate = new Date();

    $("#tsDte").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate: 0,
        changeYear: true 
    }).attr('readonly', 'readonly');
    $("#tsDte").datepicker("setDate", currentDate);
});

希望这会有所帮助。干杯

【讨论】：

感谢回复。是否需要在所有javascript文件中添加$（document）.ready（function（）。我的是单页Web应用程序。
您几乎必须在创建datepicker的任何地方添加它
:D 请注意，只有在开始时（页面加载时）创建日期选择器时，您才需要添加准备好的文档

【解决方案3】：

您正在包括jquery-ui-1.10.3.min.js 库。

您的问题是由复制您的 jQuery UI 核心脚本引起的。（检查您是否包含任何其他库，例如 jquery-ui-1.10.3.drag-drop.min.js。

只需加载一次，您的问题就会消失。

【讨论】：

在这种情况下，检查您的 AppStart/BundleConfig.cs。注释掉所有内容并将 jquery 添加到前端进行测试。这就是为我做的；显然有捆绑的库干扰了 javascript 加载。

【解决方案4】：

刷新页面时，您需要删除类“hasDatepicker”，然后（再次）设置设置。刷新时，类被保留，因此不会重新创建日期选择器。

【讨论】：

【解决方案5】：

在我的情况下，这是因为我有一个 id 为 date 的 span 并且输入具有相同的 id。给输入一个不同的 id 解决了这个问题。

【讨论】：

【解决方案6】：

有同样的问题，因为我有两个 @Html.TextBoxFor(m => m.StartDate, "{0:dd/MM/yyyy}", new { @class= "DatePicker" }) 和 @Html.HiddenFor(m => m.StartDate)

在我看来是相同的形式。

【讨论】：