date

http://docs.angularjs.org/api/ng.filter:date

概要
使用方法
デモ

概要

要求されたフォーマットに基づいて、日付を文字列にフォーマットします。

フォーマット文字列は、下記一覧から選んで構成することが可能です。

フォーマット	説明
'yyyy'	4桁の年表記です。(例: 西暦1 => 0001、西暦2010 => 2010)
'yy'	2桁の年表記です。(例: 西暦2001 => 01、西暦2010 => 10)
'y'	1桁の年表記です。(例: 西暦1 => 1、　西暦199 => 199)
'MMMM'	January ～ Decemberの形式の月表記です。
'MMM'	Jan ～ Decの形式の月表記です。
'MM'	01 ～ 12の月表記です。
'M'	1 ～ 12の月表記です。
'dd'	01 ～ 31の日表記です。
'd'	1 ～ 31の日表記です。
'EEEE'	Sunday ～ Saturdayの週表記です。
'EEE'	Sun ～ Satの週表記です。
'HH'	00 ～ 23の時間表記です。
'H'	0 ～ 23の時間表記です。
'hh'	午前・午後の01 ～ 12の時間表記です。
'h'	午前・午後の1 ～ 12の時間表記です。
'mm'	00～59の分表記です。
'm'	0～59の分表記です。
'ss'	00～59の秒表記です。
's'	0～59の秒表記です。
'.sss' or ',sss'	000～999のミリ秒表記です。
'a'	am/pmを作成します。
'Z'	-1200～+1200の4桁のタイムゾーンのオフセットです。

フォーマット文字列は、下記の事前に定義されたローカライズフォーマットのいずれかにすることも可能です。

フォーマット	説明
'medium'	en_USロケール向けに、'MMM d, y h:mm:ss a'として評価されます。(例: Sep 3, 2010 12:05:08 pm)
'short'	en_USロケール向けに、'M/d/yy h:mm a'として評価されます。(例: 9/3/10 12:05 pm)
'fullDate'	en_USロケール向けに、'EEEE, MMMM d,y'として評価されます。(例: Friday, September 3, 2010)
'longDate'	en_USロケール向けに、'MMMM d, y'として評価されます。(例: September 3, 2010)
'mediumDate'	en_USロケール向けに、'MMM d, y'として評価されます。(例: Sep 3, 2010)
'shortDate'	en_USロケール向けに、'M/d/yy'として評価されます。(例: 9/3/10)
'mediumTime'	en_USロケール向けに、'h:mm:ss a'として評価されます。(例: 12:05:08 pm)
'shortTime'	en_USロケール向けに、'h:mm a'として評価されます。(例: 12:05 pm)

フォーマット文字列は、リテラル値を含める事が可能です。それらは、シングルクウォートを必要とします。(例: "h 'in the morning'") シングルクウォートを出力するには、続けてシングルクウォートを使用します。(例: "h 'o''clock'")

使用方法

HTMLテンプレートの紐付け

{{ date_expression | date[:format] }}

$filter('date')(date[, format])

引数

引数	説明
date	型：`date`、`number`、`string` 日付オブジェクト、ミリ秒(文字列、または数値)や、各種ISO8601の日付フォーマットのいずれかで、フォーマット対象の日付指定します。 (例: yyyy-MM-ddTHH:mm:ss.SSSZと、そのショートバーションである、yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ) もし、入力値にタイムゾーンが指定されなければ、ローカルのタイムゾーンが採用されます。
format(optional)	型：`string` 初期値：`mediumDate` フォーマットするルールを指定します。もし、何も指定されなければ、mediumDateが使用されます。
戻り値	説明
	型：`string` フォーマットされた文字列です。また、もし日付/時間として認識できなければ、入力値がそのまま返されます。

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    <span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:
        {{1288323623006 | date:'medium'}}<br>
    <span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>:
       {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}<br>
    <span ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>:
       {{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}<br>
  </body>
</html>

it('should format date', function() {
  expect(binding("1288323623006 | date:'medium'")).
     toMatch(/Oct 2d, 2010 d{1,2}:d{2}:d{2} (AM|PM)/);
  expect(binding("1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'")).
     toMatch(/2010-10-2d d{2}:d{2}:d{2} (-|+)?d{4}/);
  expect(binding("'1288323623006' | date:'MM/dd/yyyy @ h:mma'")).
     toMatch(/10/2d/2010 @ d{1,2}:d{2}(AM|PM)/);
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    <span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:
        {{1288323623006 | date:'medium'}}<br>
    <span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>:
       {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}<br>
    <span ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>:
       {{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}<br>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。