AngularJSで実現する方法Webのフォームを実装する際にいつも面倒な項目といえば日付時刻だ。年・月・日とそれぞれ別のinput要素やselect要素を設けるにせよ、書式を決めてひとつのinput要素に入力してもらうにせよ、ユーザーの入力が正しいことをそれなりに深く検証しなければならない(例えば4月31日などという入力を許すべきではないし、2月29日という入力を許容するかどうかは年までチェックする必要がある)。日付だけでなく時刻までユーザーが間違いにくいように入力させるとなればなおさら面倒ということになる。Datepicke(デートピッカー)と一般的に呼ばれるUIコンポーネントだ。日付を入力するためのテキストボックス(やその横のボタンなど)をクリックすれば、カレンダーのような表示がポップアップし対象の日をクリックすることで日付の入力が行われる。これならユーザーが間違った書式(特に日本では全角文字を使ってしまうなど)で日付を入力してしまうことが少なくなるし、視覚的に曜日まで認識したうえで日付を選択できるため意図と異なる日付を入力してしまうことも減るだろう。Timepickerなるコンポーネントが収録されているため、この記事ではそれらを使って日付と時刻を入力するフォームのサンプルを示す。AngularJSのバリデーション機構でチェックされる。このサンプルでは、入力エラーがある時には決定ボタンが押せないようにしてある(ボタンがグレーになっているのに注目)。Dateオブジェクトに格納される。HTMLソースinput要素にdatepicker-popup属性を付けるとそのテキストボックスは日付入力専用となり、クリックでカレンダーがポップアップし日付を選択できるようになる。AngularJSのバリデーション機構により指定の書式(デフォルトではyyyy-MM-dd)で正しい日付が入力されているかどうかのチェックがされるため、慣れているユーザーはポップアップから日付を選択せずキーボードで直接入力することもできる。div要素を設置する。div要素のほうに付ける。Dateオブジェクトをバインドして最後に合成するように処理してやれば良いだろう。2014年3月15日お勧めカテゴリ英語でアニメ観ようずなじみ深い日本製アニメの英語版DVDで、字幕と音声から英語を学びましょうという趣旨のシリーズ記事です。APIを実装してみましょう。嶋田大貴のブログです。