AngularJS TIPS
日付／時刻値を入力する際にタイムゾーンを加味するには？（ng-model-options）
ng-model-optionsディレクティブにtimezoneパラメーターを指定することで、タイムゾーンによる時差を加味した日時を＜input＞要素から取得する方法を説明する。
ng-model-optionsディレクティブのtimezoneパラメーターを利用することで、<input type="date">／<input type="time">要素から日付／時刻値を入力する際に、タイムゾーンを加味できるようになります。さっそく、具体的なコードで挙動を確認してみましょう。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<p>
<label for="targetdate">入力時刻：</label>
<input id="targetdate" name="targetdate" type="time" ng-model="targetdate"
ng-model-options="{ timezone: '+0400' }" />
</p>
<div>結果：{{ targetdate | date: 'mediumTime' }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.targetdate = new Date();
}]);
</script>
</body>
</html>
|
ちなみに日本のタイムゾーン（JST：日本標準時）は「+0900」となります。この例の「+0400」はアラブ首長国連邦などのタイムゾーン（GST：湾岸標準時）を意味しますが、ここでは［結果］に出力される日本時間に変換された値と比較しやすいように、日本とは全く異なるタイムゾーンを指定しました。
timezoneパラメーターには、<input type="date">／<input type="time">要素を扱う際のタイムゾーンを「±HHMM」（例：+0400）の形式で指定できます*1。「UTC」／「GMT」（例：ng-model-options="{ timezone: 'UTC' }"）、あるいは、「PST」（太平洋時間）や「EST」（東部時間）のようなUSタイムゾーン省略名も指定できますが、汎用性からすれば、まずは「+HHMM」形式を優先して利用すべきです。
- *1 デフォルトはブラウザーのタイムゾーンです。例えば日本のタイムゾーンで動いているPC上のブラウザーは、「+0900」がデフォルト値となります。
［入力時刻］の値を変更すると、［結果］の時刻値が変更されます。その結果を見ると、確かに［入力時刻］のタイムゾーン「+0400」に対して、クライアント環境のタイムゾーン（日本で実行したので「+0900」で、+5時間の時差）を加味した時刻が、［結果］に反映されていることが確認できます。
処理対象：日付・時刻 カテゴリ：基本
API：ngModelOptions（ng-model-options） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
API：date カテゴリ：ng（コアモジュール） > filter（フィルター）
※以下では、本稿の前後を合わせて5回分（第59回～第63回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
59. 画像を動的に生成するには？（ng-src／ng-srcset）
＜img＞タグのng-src属性に指定する画像リソースのURLをAngularJSのスコープオブジェクト経由で完成させることで、動的に画像を表示する方法を説明する。
60. 不正な入力値もモデルに反映させるには？（ng-model-options）
入力フォームに検証機能を付けた場合、デフォルトでは不正値はモデルに反映されない。この制限を回避して反映させる方法を説明する。
61. 【現在、表示中】≫ 日付／時刻値を入力する際にタイムゾーンを加味するには？（ng-model-options）
ng-model-optionsディレクティブにtimezoneパラメーターを指定することで、タイムゾーンによる時差を加味した日時を＜input＞要素から取得する方法を説明する。
62. モデルへの入出力に際して処理を介するには？（ng-model-options）
入力フォームとモデルをバインドした際に、独自のゲッター／セッター関数を仲介させることで、そのモデルに出し入れする値を検証／加工する方法を説明する。
63. 複数のコントローラー間で共有すべき値を管理するには？（valueメソッド）
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック（今回はvalueメソッドにより管理する「値」）をサービスとして切り出し、それを呼び出す方法を説明する。
