Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

日付/時刻データを整形するには?(date)

2015年10月5日

dateフィルターを使って、日付/時刻データを任意の書式に変換する方法を説明する。ロケールの指定方法についても解説。

  • このエントリーをはてなブックマークに追加

 日付/時刻データを人間が読みやすい形式に変換するには、dateフィルターを利用します。さっそく、具体的なコードを見ていきます。

HTML
<!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>
dateフィルターによって日付を整形するためのコード(date.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 | date [:format [:timezone]] }}
  • value: 日付/時刻データ
  • format: 日付時刻フォーマット(デフォルトはmediumDate)
  • timezone: タイムゾーン(例:+0900)

 日付/時刻データ(引数value)には、以下のような値を指定できます。

  • Dateオブジェクト
  • タイムスタンプ値(1970年1月1日からの経過ミリ秒)
  • 日付/時刻文字列(yyyy-MM-ddyyyyMMddTHHmmssZyyyy-MM-ddTHH:mmZyyyy-MM-ddTHH:mm:ss.SSSZなどの形式)

 引数formatには、以下のような書式を指定できます。

書式概要
short 短い日時
medium 普通の日時
longDate 長い日付
fullDate 完全な日付
shortDate 短い日付
mediumDate 普通の日付
shortTime 短い時刻
mediumTime 長い時刻
AngularJS標準の書式

 書式は、現在のロケールによって変化します。例えば本稿のサンプルでは日本語ロケール(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秒
日付をさまざまな書式で整形した結果(de-deロケールの場合)

 利用可能なロケールは、以下のページから確認できます。

 標準で用意された書式で賄えない場合には、以下のような書式指定子を組み合わせて、独自の書式を指定することもできます。

指定子概要
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]を参照してください。

AngularJS TIPS
25. 式の値によって表示を切り替えるには?(ng-switch)

ng-switchディレクティブを使って、与えられた式の値に応じて、表示すべきコンテンツを切り替える方法を説明する。

AngularJS TIPS
26. 数値(単数/複数)によって表示を切り替えるには?(ng-plurlize)

ng-plurizeディレクティブやngMessageFormatモジュールを使うことで、変数の値によってメッセージ内容を切り替える方法を説明する。

AngularJS TIPS
27. 【現在、表示中】≫ 日付/時刻データを整形するには?(date)

dateフィルターを使って、日付/時刻データを任意の書式に変換する方法を説明する。ロケールの指定方法についても解説。

AngularJS TIPS
28. 配列からm~n件目の要素を取り出すには?(limitTo)

limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明。応用例としてページング処理を実装する。

AngularJS TIPS
29. 要素のスタイルプロパティを操作するには?(ng-style)

ng-styleディレクティブを使って、要素のスタイル(style属性)を設定・変更する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!