Razorエンジンを使用してMVC5プロジェクトにDatePicker Bootstrap 3を追加するにはどうすればよいですか？

Razorエンジンを使用してMVC5プロジェクトにDatePicker Bootstrap3をインストールする方法に関するガイドラインが必要です。このリンクをここで見つけましたが、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 UIDatepickerを使用しています。jQueryUIを含めずにこれを行う方法は他にもあります。

まず、次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がトリガーされるようにするには、jQueryready関数にdatepicker呼び出しを配置する必要があります。

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

この回答は、単にtype=date属性をHTMLinput要素に適用し、ブラウザーに依存して日付ピッカーを提供します。2017年でも、すべてのブラウザが独自の日付ピッカーを提供しているわけではないため、フォールバックを提供することをお勧めします。

ビューモデルのプロパティに属性を追加するだけです。変数の例Ldate：

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
Public DateTime Ldate {get;set;}

MVC5とVisualStudio2013を使用していると仮定します。

モデルのdatetimeプロパティの前にこれらの2行だけを追加します

[DataType(DataType.Date)] 
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

結果は次のようになります：

これが私の同じ問題に直面した誰かを助けることができることを願っています。

この回答では、ブートストラップにネイティブではないブートストラップDatePickerプラグインを使用しています。

NuGetを介してBootstrapDatePickerをインストールしてください

JavaScriptの小さな部分を作成し、DatePickerReady.jsという名前を付けて、Scriptsディレクトリに保存します。これにより、HTML5以外のブラウザでも確実に機能するようになりますが、最近はほとんどありません。

if (!Modernizr.inputtypes.date) {
    $(function () {

       $(".datecontrol").datepicker();

    });
}

バンドルを設定する

bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/bootstrap-datepicker.js",
              "~/Scripts/DatePickerReady.js",
              "~/Scripts/respond.js"))

bundles.Add(New StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/bootstrap-datepicker3.css",
              "~/Content/site.css"))

ここで、EditorForが使用されるときに、MVCが何を使用するかを識別するようにデータ型を設定します。

<Required>
<DataType(DataType.Date)>
Public Property DOB As DateTime? = Nothing

ビューコードは次のようになります

@Html.EditorFor(Function(model) model.DOB, New With {.htmlAttributes = New With {.class = "form-control datecontrol", .PlaceHolder = "Enter Date of Birth"}})

と出来上がり

Enzeroの回答に基づいて、簡潔な更新を提供しようとしています。

• Bootstrap.Datepickerパッケージをインストールします。

  PM> install-package Bootstrap.Datepicker
  ...
  Successfully installed 'Bootstrap.Datepicker 1.7.1' to ...
  

• でAPPSTART / BundleConfig.cs、バンドルに関連するスクリプトとスタイルを追加します。

  bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        //...,
        "~/Scripts/bootstrap-datepicker.js",
        "~/Scripts/locales/bootstrap-datepicker.YOUR-LOCALE-CODE-HERE.min.js"));
  
  bundles.Add(new StyleBundle("~/Content/css").Include(
        ...,
        "~/Content/bootstrap-datepicker3.css"));
  

• 関連ビューのスクリプトセクションで、日付ピッカーを有効にしてカスタマイズします。

  @section scripts{
      <script type="text/javascript">
          //...
          $('.datepicker').datepicker({
              format: 'dd/mm/yyyy', //choose the date format you prefer
              language: "YOUR-LOCALE-CODE-HERE",
              orientation: 'left bottom'
          });
      </script>
  

• 最終的に、関連するコントロールにdatepickerクラスを追加します。たとえば、TextBoxの場合、「31/12/2018」などの日付形式の場合、これは次のようになります。

  @Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" })
  

[DataType(DataType.Date)]
public DateTime BirthDate { get; set; }

このようにモデルを飾ります。私がこれを使用したブートストラップ日時ピッカーを使用できます。 https://github.com/Eonasdan/bootstrap-datetimepicker/

ブートストラップcssとjsのバンドルはすでにあると思います

日付ピッカーバンドルエントリ

 bundles.Add(new ScriptBundle("~/bundles/datePicker").Include(
           "~/Scripts/moment.min.js",
           "~/Scripts/bootstrap-datetimepicker.min.js"));

        bundles.Add(new StyleBundle("~/Content/datepicker").Include(
                 "~/Content/bootstrap-datetimepicker.min.css"));

レイアウトビューでバンドルをレンダリングする

@Styles.Render("~/Content/datepicker")
@Scripts.Render("~/bundles/datePicker")

表示されているHTML

<div class="form-group">
        @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "lead col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.BirthDate, new { @class = "datetimepicker form-control" })
            @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })
        </div>
</div>

ビューの最後にこれを追加します。

<script>
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({
            format: 'lll'
        });
    });
</script>

1.最初に
jquery.jsを参照していることを確認します2.レイアウトを確認し、「〜/ bundles / bootstrap」を呼び出していることを確認します3.レイアウトを確認します。
レンダリングセクションのスクリプトの位置を参照してください。「〜/ bundles / bootstrap」の後にある必要があります
4
。テキストボックスにクラス「datepicker」を追加します5.put $（ '。datepicker'）。datepicker（）; $（function（）{...}）;

MVC用のShieldUIの日付ピッカーをチェックアウトします。次のような数行と統合できる強力なコンポーネント。

@(Html.ShieldDatePicker()
    .Name("datepicker"))

シンプル：

[DataType(DataType.Date)]
Public DateTime Ldate {get;set;}