【Angular】10分で分かるAngularMaterialのDatepickerの使い方

0
【Angular】10分で分かるAngularMaterialのDatepickerの使い方


原田です。今回はDatepickerについて解説を行います。

ソースコードはGitHubで公開しています。

AngularMaterialの環境構築については、こちらを参照してください。

【Angular】10分でわかるAngularMaterial環境構築

また、DatepickerはInputコンポーネントを利用しています。Inputについては、こちらを参照ください。

【Angular-Material】10分で分かるInputの使い方



スポンサーリンク




サンプル

Datepickerを利用するには、MdDatepickerModuleをインポートする必要があります。

ソースコード

ソースコード解説


MdDatepickerModuleで以下の機能が提供される

  • mdDatepicker
  • mdDatepickerToggle
  • md-datepicker

mdDatepicker

inputタグに設定する。md-datepickerのIDと合わせておく。以下のパラメータを設定することができる。

mdDatepicker

パラメータ 概要
mdDatepickerFilter 日付ごとに活性、非活性を設定する。
min 選択可能な日付の開始日を設定する。
max 選択可能な日付の終了日を設定する。

mdDatepickerToggle

buttonタグに設定するものである。ここでも、md-datepickerのIDを設定する。設定することで、カレンダーのアイコンが表示され、押下することでデートピッカーが表示される。

これは、2つ目のサンプルのようにopenメソッドで書き換えることができる。

md-datepicker

ボタンやアイコンを押下したときに表示されるカレンダーを表示する。mdDatepicker、mdDatepickerToggleで設定したパラメータとIDが紐付いている。

以下のパラメータを設定することができる。

md-datepicker

パラメータ 概要
startAt 展開時に表示する日付を設定する。
touchUi モーダルダイアログで表示するか設定する。

まとめ

Datepickerについて解説をおこなった。

いま時点で解説できていない機能があるため、そこは分かり次第更新していきたいと思います。


スポンサーリンク




コメントを残す