angularJS 時間フォーマットフィルターの詳細な説明

.date フィルターの機能は、必要な形式に基づいて日付を文字列にフォーマットすることです。

書式文字列の基本パラメータ: この記事では主に angularJS 時間書式フィルターの詳細な説明を共有します。お役に立てれば幸いです。

'yyyy': 年を表すのに 4 桁を使用します (例: AD 1 => 0001、AD 2010 => 2010)

'yy': 年を表すのに 2 桁を使用します (00-99) (例: : AD 2001 => 01、AD 2010 => 10)

'y': 年を表す 1 桁を使用します (例: AD 1 => 1、AD 199 => 199)

'MMMM ': 完全な英語名 月 (1 月～12 月) を意味します

'MMM': 英語の略語は月 (1 月～12 月) を意味します

'MM': 2 桁の数字は月 (01-12) を意味します

'M': 月 ( 1-12)

'dd': 日を表す 2 桁 (01-31)

'd': 日 (1-31)

'EEEE': 曜日の完全な英語名 (日曜日) -土曜日)

'EEE ': 曜日の英語の略語 (Sun-Sat)

'HH': 時間を 24 時間形式で表す 2 桁 (00-23)

'H' : 24 時間形式の時間 (0 ～ 23)

'hh': 2 桁の数字は午前または午後の時間を表します (01 ～ 12)

'h': 午前または午後の時間 (1 -12)

'mm': 分を表す 2 桁 (00-59)

'm': 分 (0-59)

'ss': 秒を表す 2 桁 (00-59)

's ': 秒 (0-59)

'sss': ミリ秒 (000-999)

'a': AM/PM

'Z': 4 桁 (+ 符号) はタイムゾーン オフセット (-1200— —+1200)

'ww': 2 桁で表現 1 年の週数 (00 ～ 53)、最初の週 (01) は年の最初の木曜日です

'w': 週数年 (0 ～ 53) の最初の週 (1) は、年の最初の木曜日です

'G','GG','GGG': 'AD' (AD など) の時代文字列の省略形)

'GGGG': 'Anno Domini' (AD) などの時代文字列の完全な名前

必要に応じて上記のパラメータを自由に組み合わせて、'yyyy- などの必要な形式を取得できます。 MM-dd' など

フォーマット文字列には、使用すると便利な事前定義されたローカライズされたフォーマットもいくつか用意されています:

medium: 'MMM d,y h:mm:ss a' 例: Sep 3, 2010 12:05:08 PM

short: 'M/d/yy h:mm a' 例: 9/3/10 12:05 PM

fullDate: 'EEEE,MMMM d,y' 例: 2010 年 9 月 3 日金曜日

longDate: 「MMMM d,y」 例: 2010 年 9 月 3 日

mediumDate: 'MMM d,y' 例: 2010 年 9 月 3 日

shortDate: 'M/d/y' 例: 9/3/10

mediumTime: ' h:mm:ss a' 例: 12:05:08 PM

shortTime: 'h:mm a' 例: 12:05 PM

書式指定文字列にはテキスト値を含めることができます。これらは一重引用符で囲む必要があります (例: "h 'in the breakfast'")。一対の単一引用符を出力する場合は、2 つの二重引用符を連続して使用します (例: "h 'o''lock'")。

日付フィルターの使用法:

1. HTML での使用法: {{ date_expression | date : format : timezone}}

例:

<span>{{1288323623006 | date:&#39;medium&#39;}}</span><br>
 <span>{{1288323623006 | date:&#39;yyyy-MM-dd HH:mm:ss Z&#39;}}</span><br>
<span>{{&#39;1288323623006&#39; | date:&#39;MM/dd/yyyy @ h:mma&#39;}}</span><br>
<span>{{&#39;1288323623006&#39; | date:"MM/dd/yyyy &#39;at&#39; h:mma"}}</span><br>

出力結果は次のようになります:

Oct 29, 2010 11:40:23 AM

2010-10-29 11:40:23 +0800

10/29/2010 @ 11:40AM

10/29/2010 at 11:40AM

2. JavaScript での使用法: $filter('date ' )(日付、形式、タイムゾーン)

例:

var today = new Date();
$scope.formatDate = $filter('date')(today, 'yyyy-MM-dd');

出力結果は次のとおりです:

2015-01-28

2.

angularJS の日付フィルターは日付を必要な形式にフォーマットできます。

一般的に使用される方法:
{{now | date : 'yyyy-MM-dd HH:mm:ss'}}

そうでない場合指定された形式では、angularJS はデフォルト形式の mediaDate を使用します

{{data | date}}<!-- Dec 3, 2016  -->
{{data | date : mediumDate}}<!-- Dec 3, 2016  -->

以下は、angularJS の組み込みの日付形式です

{{ now | date:&#39;medium&#39; }}<!-- Dec 3, 2016 10:43:51 AM -->
{{ now | date:&#39;short&#39; }}<!-- 12/3/16 10:43 AM -->
{{ now | date:&#39;fullDate&#39; }}<!-- Saturday, December 3, 2016 -->
{{ now | date:&#39;longDate&#39; }}<!-- December 3, 2016 -->
{{ now | date:&#39;mediumDate&#39; }}<!-- Dec 3, 2016 -->
{{ now | date:&#39;shortDate&#39; }}<!-- 12/3/16 -->
{{ now | date:&#39;mediumTime&#39; }}<!-- 10:43:51 AM -->
{{ now | date:&#39;shortTime&#39; }}<!-- 10:43 AM -->

年の形式
4 桁の年: {{ now | date:'yyyy' }} < ;!-- 2016 -->
2 桁の年: {{ now | date:'yy' }}
1 桁の年: {{ now | date:'y ' }}

月の形式
英語の月: {{ now | date:'MMMM' }}
英語の月の省略形: {{ now | date:'MM' }}
数値月: {{ now |date:'MM' }}
年: {{ 現在 |date:'M' }}

日付の書式設定
数値日付: {{ now | date:'dd' }}
日付: {{ now | date:'d' }} < ;!-- 3 -->
英語の平日: {{ now | date:'EEEE' }}
英語の平日の略語: {{ now | date:'EEEE' }}

時間の書式設定
24 時間デジタル時間: {{now | date:'HH'}}
その日の数字 時間: {{now | date:'HH'}} date:'H'}}
12 時間デジタル時間: {{now | date:'hh'}}
分の書式設定
数値分: {{now | date:'mm' }}
秒の数値: {{ now | date:'ss' }}
1 分の秒数: {{ now | date:'s' }}
文字の書式設定
Up および PM 識別子: {{ now | date:'a' }}
4 桁のタイムゾーン識別子: {{ 今 | 日付:'Z' }}
カスタム形式
{{ 現在 | 日付: 'MMd, y' }}