カテゴリー
Microsoft

【ASP.NET MVC5】Bootstrap 拡張の DatePicker を使う手順とポイント

ポイント

  • 標準で日本語対応しているのが嬉しい。
  • DatePicker のフォーマットは yyyy-mm-dd とし、input date で使用するフォーマットに合わせること。これにより、DatePicker も input type date も両方使用できる。
  • Chrome や Edge だと input type date も、DatePicker for Bootstrap も両方有効になり、好きな方で操作できる。input type date の yyyy/MM/dd フォーマットで表示された。
  • Internet Explorer だと DatePicker が効いて yyyy-MM-dd フォーマットで表示される。
  • input date は IE が対応していないため、後数年もすれば input date で DatePicker と同等のことができるようになるであろう。そうすると、DatePicker for Bootstrap は不要となると思う。

導入流れ、使い方まとめ

DatePicker 導入までの流れ

  1. パッケージマネージャーコンソールから DatePicker をインストール
  2. Datepicker 動作用の JavaScript を書く。
  3. BuldleConfig に DatePicker と 動作用の JavaScript を読みこませるよう記述
  4. _Layout.cshtml などのビューに、BuldleConfig で設定したパスを記述

DatePicker を使用するには、の例まとめ

  • モデルのプロパティの DataType を Date に指定
  • モデルのプロパティの DisplayFormat の DateFormatString を yyyy-MM-dd に、ApplyFormatInEditMode を true に設定する。
  • ビューではタグの class に DatePicker 動作用のクラスを追加する。

DatePicker 導入の具体的な手順・コード

1. パッケージマネージャーコンソールから DatePicker をインストール

Install-Package Bootstrap.Datepicker

参考ページ

2. Datepicker 動作用の JavaScript を書く。

DatePicker を動作させる CSS 指定と、オプションを設定します。

今回、動作させるには datepicker というクラスを追加することにしようと思います。ですので、「.datepicker」と指定いたします。

Scripts\app.js

$(function () {
    $('.datepicker').datepicker({
        autoclose: 'true',
        format: 'yyyy-mm-dd',
        language: 'ja',
        todayHighlight: true
    });
})

参考ページ

3. BuldleConfig に DatePicker と 動作用の JavaScript を読みこませるよう記述

ScriptBundle や StyleBundle のコンストラクタ引数にビューに書くパスを、Include 関数の引数に含めたい JavaScript や CSS のプロジェクトでのパスを記述します。

bundles.Add(new ScriptBundle("~/bundles/bootstrap-datepicker").Include(
            "~/Scripts/bootstrap-datepicker.min.js",
            "~/Scripts/locales/bootstrap-datepicker.ja.min.js",
            "~/Scripts/app.js"));

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

4. _Layout.cshtml などのビューに、BuldleConfig で設定したパスを記述

Bootstrap を前提としますので、Bootstrap を読み込んだ後に、DatePicker を読み込むように記述いたします。

Views\Shared_Layout.cshtml

... 略 ...
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/css/bootstrap-datepicker")
... 略 ...
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/bootstrap-datepicker")
... 略 ...

DatePicker を使用する具体的な例

で作ったお試しアプリで試してみます。Children/Create または Children/Edit ページの Birthday に反映しますの♪

モデルのプロパティ設定

  • DataType を Date に指定
  • モデルのプロパティの DisplayFormat の DateFormatString を yyyy-MM-dd に、ApplyFormatInEditMode を true に設定する。

Models\Child.cs

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

ビューではタグの class に DatePicker 動作用のクラスを追加する。

Create ビューも Edit ビューも該当部分のコードは全く同じですので片方のみ掲載いたします。

変更は1箇所のみです。new { @class = “form-control” } → new { @class = “form-control datepicker” } と datepicker をクラスに追加するだけですの♪

Views\Children\Create.cshtml および Views\Children\Edit.cshtml

<div class="form-group">
    @Html.LabelFor(model => model.Birthday, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Birthday, new { htmlAttributes = new { @class = "form-control datepicker" } })
        @Html.ValidationMessageFor(model => model.Birthday, "", new { @class = "text-danger" })
    </div>
</div>

動作確認

以上で完成いたしましたので、実際の動きを確認いたします。

Datepicker for Bootstrap の動作確認。Chrome では Datepicker と input type date の両方が使用できる。
Datepicker for Bootstrap の動作確認。Chrome では Datepicker と input type date の両方が使用できる。

Datepicker for Bootstrap の動作確認。Internet Explorer では Datepicker のみが使用でき、 input type date は使用できない。
Datepicker for Bootstrap の動作確認。Internet Explorer では Datepicker のみが使用でき、 input type date は使用できない。

おわりに

最初は、input type date でデイトピッカーが自動的に使えるようになっておりましたので喜んでおりました。ところが、Internet Explorer の場合ですと、デイトピッカーが提供されません＞＜。

Internet Explorer 対応のために、デイトピッカーを独自に実装しなければならなくなりました。。。＞＜

そこでまず、JQuery UI を使用してデイトピッカーを実現しようと考えておりました。ところが、わたくしたちの導入方法にミスが有ったからという可能性も否定できませんけれども、うまく行きませんでしたの＞＜。

  • モデルでの ataFormatString = “{0:yyyy-MM-dd}” が効かない。
  • 結果、input type date で扱えるフォーマットではなくなり、Chrome ではフォームに年月日が表示されなくなった。
  • Internet Explorer で使用した場合、フォーマットが 2015/10/01 0:00:00 → 10/01/2015 というように変わってしまう。

そこで、なんとかならないかと探して見つけた解決策が、DatePicker for Bootstrap でした♪

ASP.NET C# MVC5 への導入は、次のページが大変参考なりました。沿って進めれば、実現することができました♪ありがとう存じます！

以上です。

コメントを残す