カレンダーフォーム表示|AngularでWebサイト作成


カレンダーフォーム表示|AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました(Angularのバージョンは4.3.6です)。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回は、入力フォームでカレンダー表示をしていきます。
date-pickerのようなjQueryライブラリを用いて実装することが多いカレンダーですが、
今回はAngularの追加モジュールである「Material Design 2」を用いて実装していきます。

開発環境

・OS:Windows8.1 64bit
・node:v7.2.1
・npm:4.0.5
・Angular:4.3.6
・開発ツール:VisualStudioCode

手順

手順1.MaterialDesign2(md2)の追加

npmで追加インストールします。

cd APP_NAME //←アプリケーションを作成したディレクトリに移動
npm i md2 --save

手順2.コンポーネント修正

コンポーネントのフォーム部分を以下の様に実装します。

<md2-datepicker 
  type='month' 
  mode='portrait'
  #toControl 
  [(ngModel)]="selected" 
  format="y/MM"
  (change)='change()'>
</md2-datepicker>

各属性項目の意味合いは以下の様になっています。

type DatePickerの種類(date、time、month、datetimeが選べる)
mode DatePickerの表示モードの指定(portrait、landscapeが選べる)
format 表示フォーマットを指定できます

※詳細はGitHubのDocをご参考下さい。

初期値の設定は
[(ngModel)]=”selected”
で双方向データバインディングしています。

値変更時は、
(change)=’changeMethod()’
でchangeMethodメソッドを実行します。

手順3.確認

ブラウザにて確認をしてみましょう。
フォームをクリックして、カレンダーが表示できればOKです。

感想

MD2はDatePicker以外にも様々なパーツが利用できるようです。いままではjQuery一択となることが多かったですが、Angularを使うにあたり、こういったものの利用も積極的に行っていきたいものです。

  • このエントリーをはてなブックマークに追加

PAGE TOP