jQuery datepicker 加载时显示未定义。答案

【问题标题】：jQuery datepicker when loaded says undefined.jQuery datepicker 加载时显示未定义。
【发布时间】：2014-03-02 04:46:31
【问题描述】：

我试图在我的表单中实现一个日期选择器，但是当它添加日期选择器的代码没有显示在 brewers 中时。检查控制台时，会发布此错误 TypeError: 'undefined' 不是函数（评估 '$( "#datepicker" ).datepicker()'） jQuery库文件添加到根文件夹中。

下面是使用的代码：

$(document).ready(function() {
$( "#datepicker" ).datepicker();
});

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datepicker</title>
<link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">
<script src="jquery-1.10.2.js"></script>
<script src="datepicker.js"></script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

【问题讨论】：

在完成必要的包含后，尝试将 datepicker () 调用放在 head 标签内。

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

你需要把你的jQuery代码放在包含jQuery和datepicker核心文件之后：

<script src="jquery-1.10.2.js"></script>
<script src="datepicker.js"></script>
<script>
    $(document).ready(function() {
        $( "#datepicker" ).datepicker();
    });
</script>

【讨论】：

jQuery 代码在一个单独的文件中，但是我只是尝试过这种方式，但它什么也没做。

【解决方案2】：

您可能还需要在 jquery-1.10.2.js 条目之后添加 jquery-ui.js。

尝试放置

$(document).ready(function() {
$( "#datepicker" ).datepicker();
});

在文件末尾的 html 标记之后和脚本标记周围，例如

<script type="text/javascript">
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>

【讨论】：

【解决方案3】：

我刚刚在 VS2012 中尝试了以下代码，它可以工作。您需要将此处的版本号更改为您自己的版本号。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script src="Scripts/jquery-ui-1.8.20.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p>Date: <input type="text" id="datepicker"></p>
    </div>
    </form>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {
        $("#datepicker").datepicker();
    });
</script>

【讨论】：

【解决方案4】：

确保所有脚本都指向工作区中的正确位置。

在完成必要的包含后，尝试将 jQuery 的 document.ready 函数放在 head 标签内。

我猜通过标记，脚本标签要么放在正文标签内，要么放在头标签内

希望这行得通。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datepicker</title>
<link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">
<script src="jquery-1.10.2.js"></script>
<script src="datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

这非常有效。

jsFiddle 演示：http://jsfiddle.net/arunkumars08/98CRq/

HTML：

<p>
Date: 
<input type="text" id="datepicker" />
</p>

JS：

$(document).ready(function() {
$( "#datepicker" ).datepicker();
});

【讨论】：

【解决方案5】：

我遇到了同样的问题。我所做的修复它是在控件之后添加对脚本的引用。

<head>
  <link href="../Scripts/jquery-ui-1.11.1.custom/jquery-ui.css" rel="stylesheet" />
  <script src="../Scripts/jquery-2.1.1.js"></script>
</head>
<body>
  <div>
    <input type='text' onkeypress='return false' class='datepicker' />
  </div>
  
  <script src="../Scripts/jquery-ui-1.11.1.custom/external/jquery/jquery.js"></script>
    <script src="../Scripts/jquery-ui-1.11.1.custom/jquery-ui.js"></script>
  <script>
        $(this).ready(function () {
            $(".datepicker").datepicker();
        });
    </script>
</body>

【讨论】：

【解决方案6】：

您需要添加将为您的输入标签调用日期选择器的函数。将js代码放在文件末尾。也不要忘记将此代码包含到将自行执行的函数中：

<script type="text/javascript">
$(document).ready(function() {
$( '#datepicker' ).datepicker();
});
</script>

或

<script type="text/javascript">
(function() {
$( '#datepicker' ).datepicker();
})();
</script>

【讨论】：