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

我需要一些关于如何安装的指南日期选择器 http://eternicode.github.io/bootstrap-datepicker/使用 Razor 引擎的 MVC 5 项目上的 Bootstrap 3。我找到了这个链接here http://icanmakethiswork.blogspot.in/2013/01/twitterbootstrapmvc4-meet-bootstrap.html但无法使其在 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"));

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

@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>

这个答案使用了jQuery UI 日期选择器 http://api.jqueryui.com/datepicker/，这是一个单独的包含。还有其他方法可以在不包含 jQuery UI 的情况下执行此操作。

首先，您只需添加datepicker文本框的类，除了form-control:

<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，您必须将 datepicker 调用放入 jQuery 就绪函数中：

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