在 asp.net mvc 4 应用程序中包含一个日期选择器答案

【问题标题】：Including a datapicker in an asp.net mvc4 application在 asp.net mvc 4 应用程序中包含一个日期选择器
【发布时间】：2013-05-29 08:32:43
【问题描述】：

我有一个 asp.net mvc4 应用程序。在上传的视图中，我想添加一个数据选择器日历，所以我修改了这样的布局：

   <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - Mon application ASP.NET MVC</title>
        <link href="~/akeo.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"/>
    <script src="../../Scripts/jquery.ui.core.js" type="text/javascript" />
    <script src="../../Scripts/jquery.ui.widget.js" type="text/javascript" />
    <script src="../../Scripts/jquery.ui.datepicker.js" type="text/javascript" />

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript" />
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript" />
    <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript" /> 
          <script>
              $(function () {
                  $("#datepicker").click(datepicker());
              });
    </script>
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>

在 Uploading.cshtml 视图中，我为数据选择器放置了一个文本区域：

@using (Html.BeginForm("Uploading", "Akeo", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="file" />
    <br />
    @Html.Label("Date d'expiration")
    <input type="text" name="duree" />
    <br />


    <input type="text" id="datepicker" />
    <input type="submit" value="OK" />

}

问题是当我点击文本时没有发生任何事情并且日历没有出现。

这是什么原因？如何修改代码以更正此错误？

【问题讨论】：

标签： jquery asp.net asp.net-mvc jquery-ui datapicker

【解决方案1】：

您的 javascript 代码应该是：

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

【讨论】：

你的javascript文件加载正确了吗？请检查路径。我建议使用波浪号“~”，甚至更好地使用捆绑，它在 mvc4 中具有标准支持
例如捆绑：例如：@Scripts.Render("~/bundles/jquery")
好的。对于您的 css 文件，您需要另一个路径：
我在布局中添加了这个<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />，但结果相同！！
让我们continue this discussion in chat

【解决方案2】：

您正在尝试通过 ID datepicker 访问输入字段。更改选择输入字段的方式或在输入字段上添加 id，如下所示：

<input id="datepicker" type="text" name="duree" />

或者您可以将输入字段的类型更改为日期并使用以下命令选择它：

$('input[type="date"]')

把js改成：

$('input[type="date"]').datepicker()

我建议你看看 HTML5 输入类型。日期类型得到越来越多的支持：http://caniuse.com/input-datetime

如果您不关心所有这些，只需更改以下 2 部分：

$(function() {
    $( "#myDate" ).datepicker();

});

<input type="text" id="myDate" />

【讨论】：

当我将$('input[type="date"]') 放在文本的位置时，我得到了一个日历，但即使我删除了$('input[type="date"]').datepicker()，它也不是数据选择器
我在答案末尾添加了一个简短版本。如果更改 2 行会发生什么？
如果您删除对 jQuery 脚本和 css 的引用并用此处描述的引用脚本替换它们会发生什么：jqueryui.com/datepicker