如何使用 Razor 引擎在 MVC 5 項目上添加 Date Picker Bootstrap 3？

我需要一些關於如何使用 Razor 引擎在 MVC 5 項目上安裝Date Picker Bootstrap 3 的指南。我在這裡找到了這個連結，但無法在 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 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>

引用自：https://stackoverflow.com/questions/21104633