[英]bootstrap-datepicker error: datepicker is not a function
有人可以帮我解决这个错误吗? 在检查其他解决方案后,他们说他们两次声明了 jquery,这就是它显示的原因。 但就我而言,我只声明了一次 jquery。 请看下面的代码片段:
$(document).ready(() => { $("#datepicker").datepicker({ format: "mm-yyyy", startView: "months", minViewMode: "months" }); })
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>My Teasting Website</title> <.--Bootstrap css--> <link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css"> <.--bootstrap-datepicker css--> <link rel="stylesheet" href="src/bootstrap-datePicker/css/bootstrap-datetimepicker.min.css"> </head> <body> <input type="text" readonly="readonly" name="date" id = "datepicker"> <span class="add-on"><i class="icon-th"></i></span> <.--Jquery js--> <script src="src/jquery.js"></script> <.--Bootstrap js--> <script src = "src/bootstrap/js/bootstrap.min.js"></script> <!--bootstrap-datepicker js --> <script src="src/bootstrap-datePicker/js/bootstrap-datetimepicker.min.js"></script> <script src = "js/script.js"></script> </body> </html>
如您所见,下面是我的文件夹目录和声明:
控制台上显示的错误:
尝试在此处遵循此示例...
您的代码的不同之处在于您在 jquery 中使用了id
而不是class
:
$(document).ready(() => {
$(".datepicker").datepicker({
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
});
})
此外,更改 HTML:
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
看起来 bootstrap-datepicker 未正确加载确保您的 js 文件路径正确,我无法确定路径是否正确,但是,加载脚本的顺序是正确的。 尝试为 jquery 和引导程序使用 CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Teasting Website</title>
<!--Bootstrap css-->
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<!--bootstrap-datepicker css-->
<link rel="stylesheet" href="src/bootstrap-datePicker/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<input type="text" readonly="readonly" name="date" id = "datepicker">
<span class="add-on"><i class="icon-th"></i></span>
<!--Jquery js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(() => {
$("#datepicker").datepicker({
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
});
})
</script>
</body>
</html>
这对我有用,我在控制台上看不到任何错误。 我刚刚用 CDN 替换了您的文件路径。 我确定你的路径有问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.