jQuery 对象不支持属性或方法日期选择器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31582011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:48:51  来源:igfitidea点击:

object doesn't support property or method datepicker

jquerytwitter-bootstrapdatepicker

提问by kalahari

I am trying to put a datepicker in my page and getting this error. I already searched and looked for other answers to this error, but couldn't find any.

我试图在我的页面中放置一个日期选择器并收到此错误。我已经搜索并寻找此错误的其他答案,但找不到任何答案。

Without the FOR BOOTSTRAPpart, it works; but with it, I am getting this error. What is the reason behind this and how can I fix this?

没有FOR BOOTSTRAP部分,它可以工作;但是有了它,我收到了这个错误。这背后的原因是什么,我该如何解决?

Here is my index.cshtml:

这是我的index.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="en">
<head>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/Chart")
    @Scripts.Render("~/bundles/moment")
    <meta charset="utf-8" />
    <title>ENOCTA DASHBOARD</title>

    <!-- FOR DATEPICKER -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
        $(function () {
            $("#datepicker").datepicker();
        });
    </script>

    <!-- FOR BOOTSTRAP -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>

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

</html>

采纳答案by mfeineis

You have 2 versions of jQuery on the page, the jQuery UI datepicker hangs itself into the first version, then the second one overwrites the first one and thus the datepicker is not available when the DOMContentReadyevent is fired. The solution is to move the second jquery include up and remove the first one:

您在页面上有 2 个版本的 jQuery,jQuery UI 日期选择器将自己挂在第一个版本中,然后第二个版本覆盖第一个版本,因此在DOMContentReady触发事件时日期选择器不可用。解决方案是将第二个 jquery include 向上移动并删除第一个:

<!-- FOR DATEPICKER -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
    $(function () {
        $("#datepicker").datepicker();
    });
</script>

<!-- FOR BOOTSTRAP -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>