将 datepicker 添加到 Asp.net MVC 应用程序答案

【问题标题】：Add datepicker to Asp.net MVC app将 datepicker 添加到 Asp.net MVC 应用程序
【发布时间】：2014-01-12 18:36:14
【问题描述】：

我正在构建一个 Asp.net MVC 应用程序并想添加一个日期选择器。

我在视图中的表单中有此代码

@Html.LabelFor(b => b.Date)
@Html.EditorFor(b => b.Date, new {id = "news_date"})

这是我用来制作日期选择器的 javascript。

$(document).ready(function () {
    $("#news_date").datepicker({ dateFormat: 'dd/mm/yy' });
});

我希望这样当用户单击文本框时会出现一个日期选择器，然后他们可以选择一个日期。当前，当我单击文本框时没有任何反应，因此我认为 javascript 或将其链接到文本框存在问题。有什么想法吗？

编辑： Web 控制台显示此错误：

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

编辑：编辑：这是从浏览器控制台编译和获取的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Enter Transaction - My ASP.NET MVC Application</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css"/>
        <link href="/Content/site.css" rel="stylesheet"/>

        <script src="/Scripts/modernizr-2.6.2.js"></script>


    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="/">your logo here</a></p>
                </div>
                <div class="float-right">
                    <nav>
                        <ul id="menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">

            <section class="content-wrapper main-content clear-fix">
                <script type="text/javascript">
    $(document).ready(function () {
        $("#Date").datepicker({ dateFormat: 'dd/mm/yy' });
    });
</script>



<h2>Enter Transaction</h2>
<form action="/Home/EnterTransaction" method="post">        <p>
            <label for="Type">Type</label>
            <select id="TypeItems" name="TypeItems"><option value="0">Type1</option>
<option value="1">Type2</option>
</select>
            <br />
            <label for="Date">Date</label>
            <select id="UserItems" name="UserItems"><option value="0">User1</option>
<option value="1">User2</option>
</select>
            <br />
            <label for="Date">Date</label>
            <input type="text" id="news_date" name="news_date" />
            <input class="text-box single-line" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="Date" name="Date" type="date" value="12/01/2014" />


        </p>
        <input type="submit" value="Submit">
        <p></p>
</form>


            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; 2014 - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>
        <script src="/Scripts/jquery-2.0.3.js"></script>



    </body>
</html>

【问题讨论】：

如果打开浏览器的控制台，有没有报错？
@mituw16 用我发现的错误编辑了我的问题
您是否引用了所有必需的 javascript 文件？
@IronGeek 你能用我需要的参考资料和这些参考资料的位置发布答案吗？
@BrianPeach 我可以，但 Raphaël Althaus 已经做到了 :)

标签： c# jquery asp.net-mvc jquery-ui-datepicker

【解决方案1】：

两件事：

首先，确保您引用了 jquery 和 jqueryui。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css"/>

您还需要引用 jquery ui css。

其次，EditorFor 不会以 html 属性为参数重载。

你应该这样做

@Html.LabelFor(b => b.Date)
@Html.EditorFor(b => b.Date)

对于 jquery 部分

$(document).ready(function () {
    $("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });
});

【讨论】：

我已将 jquery 和 jqueryui 的引用添加到 _layout.cshtml 的中，并且我使用了您的 jquery 方法，但它仍然无法正常工作。我如何引用 jquery ui css？
@BrianPeach 添加了 jquery ui css。现在，如果你还有控制台错误，你能说一下你有什么错误吗？
@BrianPeach 的 jquery 版本很糟糕，顺便说一句。
仍然遇到同样的错误。我已将更改添加到带有引用的 _layout.cshtml 的中，但仍然没有
@BrianPeach 第一个用于 jquery 脚本。您能否将页面的源代码（相关部分）发布在 jsFiddle 中，也许？顺便问一下，你刷新页面了吗（Ctrl + F5）？