[解決済み] Razorエンジンを使って、MVC 5プロジェクトにDate Picker Bootstrap 3を追加するには？

質問

私は、以下のようなインストール方法を必要としています。 日付ピッカー Bootstrap 3 を Razor エンジンを使用する MVC 5 プロジェクト上にインストールする方法を教えてください。私はこのリンクを見つけた ここで を見つけましたが、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デートピッカー を使用していますが、これは別のインクルードです。 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が起動するように、jQuery ready関数にdatepickerの呼び出しを記述する必要があります。

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