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

カテゴリー
コンピューター

【Bootstrap3】フォームの for と id のポイント

Bootstrap3 のフォームを div で入れ子にして書いていく内に、混乱してきました><。for と id はどういう場合に付けて、どういう場合に付けないのかしら><。

今回のお話は、Bootstrap3 を使用する、しないに関わらず、HTML を書くときのお作法なのかもしれません。ですけれども、Bootstrap3 のコードを例にポイントを残しておきますわ♪

フォームで for と id を使う時、使わない時のポイント

  • 項目名ラベルに for を、対応する input に id を付けること。
  • input、select、textarea には for と id が必要
  • ただし checkbox、radio には for と id 不要
  • form-control-static の場合は for と id 不要

詳しい Bootstrap3 のフォームの書き方はこちらです。