タグ: DatePicker

カテゴリー
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 導入の具体的な手順・コード

続きを読む “【ASP.NET MVC5】Bootstrap 拡張の DatePicker を使う手順とポイント”