Question

我试图在我的表单中实现日期选择器但是当添加日期选择器的代码没有显示在酿酒师中时。检查控制台时会发布此错误 TypeError：'undefined'不是函数（评估'$（“＃datepicker”）。datepicker（）'） jQuery库文件添加在根文件夹中。

Bellow是使用的代码：

$(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>

Answer 1

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

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

Answer 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>

Answer 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>

Answer 4

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

尝试在必要的包含之后将jQuery的document.ready函数放在head标记中。

我想通过标记，脚本标签应放在body标签或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();
});

Answer 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>

Answer 6

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

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

或

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

加载时jQuery datepicker表示未定义。

6 个答案: