AngularJSとHTML5の日付入力値 – Firefoxで読み取り可能な日付値を表示する方法

HTML5の日付入力とAngularJSの連携

HTML5の type="date" 属性を持つ <input> 要素を使用すると、ユーザーはテキストボックスへの直接入力、または日付ピッカー（カレンダーUI）を使って簡単に日付を入力できます。さらに、AngularJSの ng-model ディレクティブを組み合わせれば、アプリケーションのデータとHTML入力コントロールを双方向にバインドすることが可能です。

Firefoxにおける問題点

ところが、Firefoxは現在 type="date" をサポートしていないため、入力された値がすべて文字列として扱われてしまいます。これにより、日付をDateオブジェクトとして操作したい場合に不都合が生じます。

解決策：2つの変数を連携させる

日付を文字列ではなく、実際のDateオブジェクトとして扱いたい場合は、別の変数を作成し、2つの変数を $watch で連携させる方法が有効です。以下のコードでその実装例を示します。

<input type = "date" ng-model = "realdate" />

function MainCtrl($scope, dateFilter) {
   $scope.date = new Date();
   $scope.$watch('date', function (date){
      $scope.dateString = dateFilter(date, 'yyyy-MM-dd');
   });
   $scope.$watch('realdate', function (realdate){
      $scope.date = new Date(realdate);
   });
}

このコードでは、dateFilter を使ってDateオブジェクトを「yyyy-MM-dd」形式の文字列に変換しつつ、realdate の変更を監視して文字列を再びDateオブジェクトに変換しています。これにより、Firefoxのような type="date" 非対応ブラウザでも、日付値を正しく読み取り可能な形式で表示・操作できるようになります。