All posts

Angular.js の日付や通貨表示のフィルタを日本語表記に対応させる方法

橋本

2 min read

Author
  • 橋本
Published
Reading time
2 min

AngularJSには、便利なフィルタが用意されています。

フィルタを使用すれば、日付や通貨のデータを簡単な表記で様々なフォーマットで表示することが出来ます。

AngularJSで日付や通貨を表示する例

例えば、dateに日付オブジェクト、moneyに数値データが入っている場合、以下のようにHTMLテンプレートを書けば、様々なフォーマットで表示することが出来ます。
金額の3桁区切りも簡単です。

{{ today }}
{{ today | date: 'medium' }}
{{ today | date: 'short' }}
{{ today | date: 'fullDate' }}
{{ today | date: 'longDate' }}
{{ today | date: 'mediumDate' }}
{{ today | date: 'shortDate' }}
{{ today | date: 'mediumTime' }}
{{ today | date: 'shortTime' }}
{{ money | currency }}

上記のHTMLはこんな感じで表示されます。

"2015-05-14T03:05:06.806Z"
5/14/15 12:05:06 PM
5/14/15 12:05 PM
Thursday, May 14, 2015
May 14, 2015
May 14, 2015
5/14/15
12:05:06 PM
12:05 PM
$1,000,000,000.00

HTMLのソースはこんな感じです。

<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>test</title>
</head>

<body>

	<div ng-controller="TestCtrl">
		<p>{{ today | date: 'fullDate' }}</p>
		<p>{{ money | currency }}</p>
	</div>

	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
	
	<script>
		var app = angular.module('app', []);
		app.controller('TestCtrl', function($scope) {
			$scope.today = new Date();
			$scope.money = 1000000000;
		});
	</script>

</body>
</html>

日本語表記に切り替える

日付や通貨の表記が英語圏に合わせたものになっていますので、これを日本語圏の表記に切り替えるには、angular-i18nの日本語モジュールを追加読み込みするだけでOKです。

先程のソースの16行目に以下のコードを追加します。

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
　↓
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.15/angular-locale_ja-jp.js"></script>

たったこれだけで、なんと日本語表記に切り替わりました。

"2015-05-14T02:50:30.667Z"
2015/05/14 11:50:30
2015/05/14 11:50
2015年5月14日木曜日
2015年5月14日
2015/05/14
2015/05/14
11:50:30
11:50
¥1,000,000,000.00

サンプルはこちら
こうした定型のフォーマット以外にも、独自のフォーマットで表示することも可能です。
日付であれば、以下のページを参考にすれば簡単にカスタマイズできると思います。
date | AngularJS 1.2 日本語リファレンス | js STUDIO:
AngularJSのフィルタはとっても便利ですね。

Discussion

Continue reading

All posts