Question

在我的布局中，我引用了以下文件：

 <link type="text/css" href="~/Content/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    @*<script src="~/Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>*@
    <script src="~/Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>

在我的index.cshtml中，我在<script>标记

中添加了以下行

$("#Start_Date").datepicker();

我输入的文字类型：

<input type="text" name="Start_Date" id="Start_Date" />

但它显示错误：

TypeError: $(...).datepicker is not a function

我检查了所有文件，但找不到任何错误。任何线索都将受到赞赏。

由于

Answer 1

我认为您已添加jQuery两次。使用更新的。

可能有几个原因：

在jquery之前使用jquery.ui。
$由另一个图书馆使用。

Answer 2

您可能需要初始化datepicker，如：

$("#datepicker").datepicker({
        dateFormat: "dd/mm/yy",
        showOn: "button",
        buttonImage: "../Content/images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date",
        onSelect: function (dateText) {
            //alert("Selected date: " + dateText + "; input's current value: " + this.value);
            RetrieveCalendar();
        }
    });

HTML：

<input type="text" id="datepicker" class="col-lg-8 col-md-8 col-sm-8 form-control" placeholder="Select Date" readonly>

Answer 3

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker - Default functionality</title>
    <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>
  </head>
  <body>
    <p>Date: <input type="text" id="datepicker"></p> 
  </body>
</html>

Answer 4

https://api.jquery.com/ready/

<link type="text/css" href="~/Content/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>    
<script src="~/Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>

$(function() {
    $("#Start_Date").datepicker();
});

Answer 5

是的，最后我得到了解决方案，实际上是由于MVC4的目的：

我从_layout.cshtml中注释掉了以下文件：

   @*@Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")*@

然后在_layout.cshtml的主题部分添加了我想要的文件：

<script src="~/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<link type="text/css" href="~/Content/jquery-ui-1.8.20.custom.css" rel="stylesheet" />

然后在索引视图中错误发生了。

$(function() {
    $("#Start_Date").datepicker();
});

上面的代码片段工作正常：）

浏览到下面给出的链接，以获取有关MVC4中有关此内容的知识库的知识： http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/jquery-ui-datepicker-in-mvc-4-issue/

jquery datepicker无法加载MVC4

5 个答案: