MVC4 JQuery Datepicker从输入框中捕获日期答案

【问题标题】：MVC4 JQuery Datepicker to capture date from input boxMVC4 JQuery Datepicker从输入框中捕获日期
【发布时间】：2014-01-06 23:04:01
【问题描述】：

有没有人有使用 jquery ui 的 datepicker 和 Razor 的经验@Html.TextBoxFor(...)

我试图允许用户使用 Razor 标记选择日期以生成文本框，单击时将显示来自 jquery UI 的 Datepicker。我不确定是否使用：

@using (Html.BeginForm("New","Order"))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
    @Html.LabelFor(m => m.OrderInfo.installdate)
    @Html.TextBoxFor(m => m.OrderInfo.installdate, new {@id="dp"})
    </fieldset>
}

<script type="text/javascript">
 $(document).ready(function () {

        $("#dp").datepicker();
    });
</script>

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui")

按此顺序运行，无论重新排列，都无法显示日期选择器。

这甚至可以这样做吗？

【问题讨论】：

你是否也包含了 jquery（不仅仅是 jqueryui）？
jquery include 在我的布局底部我已经更新了订单
顺序应该是 1) jquery, 2) jquery-ui, 3) 你的脚本
你所拥有的应该可以工作。调试控制台有错误吗？
这么简单的任务。然而仍然无法渲染。调试控制台上没有错误，但 jQuery 甚至没有加载，因为我什至无法在我的页面上 alert("hello");。网上有人说脚本渲染应该在页面底部，它既不顶部也不底部

标签： javascript jquery asp.net-mvc-4 razor datepicker

【解决方案1】：

确保您已捆绑资源

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js");
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js");
bundles.Add(new StyleBundle("~/bundles/themes/base").Include(
    "~/content/themes/base/jquery.ui.core.css",
    "~/Content/themes/base/jquery.ui.datepicker.css",
    ...
);

以正确的顺序包含它们

Layout.cshtml

<html>
<head>
    @Styles.Render("~/bundles/themes/base")
</head>
<body>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @RenderSection("page_scripts", required: false)
</body>

现在是视图...由于脚本已包含在布局中，因此视图不需要它。

@Html.TextBoxFor(m => m.installdate, new { @id="dp" })

@section page_scripts {
    <script>
        $(document).ready(function () {
            $("#dp").datepicker({ ... });
        });
    </script>
}

如果布局中没有它或不使用它

@Html.TextBoxFor(m => m.installdate, new { @id="dp" })

@Styles.Render("~/bundles/themes/base")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<script>
    $(document).ready(function () {
        $("#dp").datepicker({ ... });
    });
</script>

【讨论】：