カレンダーフォーム表示｜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>

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

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

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

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

手順3.確認

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

感想

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

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載