asp.net-mvc - 如何使用 Razor 引擎在 MVC 5 项目上添加日期选择器 Bootstrap 3？

Question

我需要一些关于如何安装 Date Picker 的指南使用 Razor 引擎的 MVC 5 项目上的 Bootstrap 3。我找到了这个链接here但无法使其在 VS2013 中运行。

从上面后面的链接中的示例复制我已经完成了以下操作:

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-datepicker.js",    // ** NEW for Bootstrap Datepicker
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-datepicker.css",  // ** NEW for Bootstrap Datepicker
                  "~/Content/site.css"));

然后我将脚本添加到索引 View ，如下所示

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript">
    $('.datepicker').datepicker(); //Initialise any date pickers
</script>
}

现在，如何在这里调用日期选择器？

   <div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

Answer 1

此答案使用 jQuery UI Datepicker ，这是一个单独的包含。还有其他方法可以在不包含 jQuery UI 的情况下执行此操作。

首先，除了 form-control 之外，您只需将 datepicker 类添加到文本框即可:

<div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

然后，为了确保在呈现文本框后触发 JavaScript，您必须将日期选择器调用放入 jQuery 就绪函数中:

<script type="text/javascript">
    $(function () { // will trigger when the document is ready
       $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>