AngularJS TIPS
日付／時刻データを整形するには？（date）
dateフィルターを使って、日付／時刻データを任意の書式に変換する方法を説明する。ロケールの指定方法についても解説。
日付／時刻データを人間が読みやすい形式に変換するには、dateフィルターを利用します。さっそく、具体的なコードを見ていきます。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<ul>
<li>元の値：{{current}}</li>
<li>整形（デフォルト）：{{current | date}}</li>
<li ng-repeat="format in formats">
整形（{{format}}）：{{current | date: format}}
</li>
<li>整形（書式指定）：{{current | date: 'yyyy年M月d日（EEE）a hh時mm分ss秒'}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="i18n/angular-locale_ja-jp.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.current = new Date();
$scope.formats = [ 'medium', 'short', 'fullDate', 'longDate',
'mediumDate', 'shortDate', 'mediumTime', 'shortTime' ];
}]);
</script>
</body>
</html>
|
|
元の値："2015-08-13T01:11:34.655Z"
整形（デフォルト）：2015/08/13
整形（medium）：2015/08/13 10:11:34
整形（short）：2015/08/13 10:11
整形（fullDate）：2015年8月13日木曜日
整形（longDate）：2015年8月13日
整形（mediumDate）：2015/08/13
整形（shortDate）：2015/08/13
整形（mediumTime）：10:11:34
整形（shortTime）：10:11
整形（書式指定）：2015年8月13日（木）午前 10時11分34秒
|
dateフィルターの一般的な構文は、以下の通りです。
［構文］dateフィルター
- value： 日付／時刻データ
- format： 日付時刻フォーマット（デフォルトはmediumDate）
- timezone： タイムゾーン（例：+0900）
日付／時刻データ（引数value）には、以下のような値を指定できます。
Dateオブジェクト- タイムスタンプ値（1970年1月1日からの経過ミリ秒）
- 日付／時刻文字列（yyyy-MM-dd、yyyyMMddTHHmmssZ、yyyy-MM-ddTHH:mmZ、yyyy-MM-ddTHH:mm:ss.SSSZなどの形式）
引数formatには、以下のような書式を指定できます。
| 書式 | 概要 |
|---|---|
| short | 短い日時 |
| medium | 普通の日時 |
| longDate | 長い日付 |
| fullDate | 完全な日付 |
| shortDate | 短い日付 |
| mediumDate | 普通の日付 |
| shortTime | 短い時刻 |
| mediumTime | 長い時刻 |
書式は、現在のロケールによって変化します。例えば本稿のサンプルでは日本語ロケール（angular-locale_ja-jp.js）をインポートしていますが、これをドイツロケール（angular-locale_de-de.js）に置き換えると、以下のような結果が得られます。
|
元の値："2015-08-13T01:38:29.825Z"
整形（デフォルト）：13.08.2015
整形（medium）：13.08.2015 10:38:29
整形（short）：13.08.15 10:38
整形（fullDate）：Donnerstag, 13. August 2015
整形（longDate）：13. August 2015
整形（mediumDate）：13.08.2015
整形（shortDate）：13.08.15
整形（mediumTime）：10:38:29
整形（shortTime）：10:38
整形（書式指定）：2015年8月13日（Do.）vorm. 10時38分29秒
|
利用可能なロケールは、以下のページから確認できます。
標準で用意された書式で賄えない場合には、以下のような書式指定子を組み合わせて、独自の書式を指定することもできます。
| 指定子 | 概要 |
|---|---|
| d | 日（1～31） |
| dd | 日（01～31） |
| M | 月（1～12） |
| MM | 月（01～12） |
| MMM | 月の省略名（Jan～Dec） |
| MMMM | 月の完全名（January～December） |
| yy | 2桁の年（01～99） |
| yyyy | 4桁の年（0001～9999） |
| EEE | 曜日の省略名（Sun～Sat） |
| EEEE | 曜日の完全名（Sunday～Saturday） |
| w | 週（0～53） |
| ww | 週（00～53） |
| .sss／,sss | ミリ秒（000～999） |
| s | 秒（0～59） |
| ss | 秒（00～59） |
| m | 分（0～59） |
| mm | 分（00～59） |
| h | 時間（1～12） |
| hh | 時間（01～12） |
| H | 時間（0～23） |
| HH | 時間（00～23） |
| a | am／pm |
| Z | タイムゾーンのオフセット（-1200～+1200） |
ただし、サンプルの結果を見ても分かるように、独自の書式を指定した場合には、現在のロケールによらず、フォーマットは固定されてしまいます（曜日、午前／午後など一部の表記だけが変化します）。一般的には、標準の書式を優先して、どうしても必要な場合にだけ独自の書式を利用するようにするとよいでしょう。
処理対象：フィルターコンポーネント カテゴリ：基本
API：date カテゴリ：ng（コアモジュール） > filter components（フィルターコンポーネント）
※以下では、本稿の前後を合わせて5回分（第25回～第29回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
26. 数値（単数／複数）によって表示を切り替えるには？（ng-plurlize）
ng-plurizeディレクティブやngMessageFormatモジュールを使うことで、変数の値によってメッセージ内容を切り替える方法を説明する。
27. 【現在、表示中】≫ 日付／時刻データを整形するには？（date）
dateフィルターを使って、日付／時刻データを任意の書式に変換する方法を説明する。ロケールの指定方法についても解説。
