Detaillierte Erläuterung des AngularJS-Zeitformatierungsfilters

1. Die Funktion des Datumsfilters besteht darin, ein Datum basierend auf dem erforderlichen Format in eine Zeichenfolge zu formatieren.

Grundlegende Parameter der Formatzeichenfolge: Dieser Artikel teilt Ihnen hauptsächlich die detaillierte Erklärung des AngularJS-Zeitformatierungsfilters mit. Ich hoffe, er kann Ihnen helfen.

'yyyy': Verwenden Sie 4 Ziffern, um das Jahr darzustellen (zum Beispiel: AD 1 => 0001, AD 2010 => 2010)

'yy': Verwenden Sie 2 Ziffern, um das Jahr darzustellen Jahr ( 00-99) (zum Beispiel: AD 2001 => 01, AD 2010 => 10)

'y': Verwenden Sie eine Ziffer, um das Jahr darzustellen (zum Beispiel: AD 1 => 1, 199 n. Chr. = > 199)

'MMMM': Der vollständige englische Name bedeutet Januar-Dezember

'MMM': Die englische Abkürzung bedeutet Januar-Dez

'MM': Zwei Ziffern repräsentieren den Monat (01-12)

'M': Monat (1-12)

'dd': Zwei Ziffern repräsentieren den Tag (01-31)

'd': Tag (1-31)

'EEEE': der vollständige englische Name des Wochentags (Sonntag-Samstag)

'EEE' : die englische Abkürzung der Woche Der Tag in (Sonn-Sa)

'HH': Zwei Ziffern repräsentieren die Stunde im 24-Stunden-Format (00-23)

'H': Die Stunde im 24-Stunden-Format (0-23)

'hh': Zwei Ziffern, die die Stunde des Morgens oder Nachmittags angeben (01-12)

'h': Die Stunde von am Morgen oder Nachmittag (1-12)

'mm': Zwei Ziffern stellen Minuten dar (00-59)

'm': Minuten (0-59)

'ss': Zwei Ziffern stellen Sekunden dar (00-59)

's': Sekunden (0-59)

'sss': Millisekunden (000-999)

'a': AM/PM

'Z': 4 Ziffern (+ Vorzeichen) für den Zeitzonenversatz (-1200 - +1200)

'ww': 2 Ziffern für den Wochennummer des Jahres (00-53), die erste Woche (01) ist der erste Donnerstag des Jahres

'w': die Anzahl der Wochen des Jahres (0-53), die erste Woche (1) ist der Tag des Jahres. Erster Donnerstag

'G','GG','GGG': Abkürzung der Ära-Zeichenfolge, z. B. 'AD' (A.D.)

' GGGG': Abkürzung der Ära-Zeichenfolge Vollständiger Name, z. B. 'Anno Domini' (AD)

Wir können die oben genannten Parameter nach unseren eigenen Wünschen frei kombinieren, um das gewünschte Format zu erhalten, z. B. 'yyyy- MM-tt' usw.

Die Formatzeichenfolge stellt auch einige vordefinierte lokalisierte Formate bereit, die für uns praktisch sind:

Medium: 'MMM d,y h:mm:ss a' Zum Beispiel: 3. September 2010 12:05:08 Uhr

kurz: 'M/d/jj h:mm a' Zum Beispiel: 03.09.10 12:05 Uhr

vollständiges Datum: 'EEEE,MMMM d ,y' Zum Beispiel: Freitag, 3. September 2010

longDate: 'MMMM d,y' Zum Beispiel: 3. September 2010

mediumDate: 'MMMM d,y' Zum Beispiel: 3. September 2010

shortDate: 'M/d/y' Zum Beispiel: 03.09.10

mediumTime: 'h:mm:ss a' Zum Beispiel: 12:05: 20 Uhr

shortTime: 'h:mm a' Zum Beispiel: 12:05 Uhr

Die Formatzeichenfolge kann Textwerte enthalten. Diese müssen in einfache Anführungszeichen gesetzt werden (z. B. „h 'am Morgen'“). Wenn Sie ein Paar einfache Anführungszeichen ausgeben möchten, verwenden Sie zwei doppelte Anführungszeichen in einer Folge (z. B. „h 'o''clock'“).

Verwendung des Datumsfilters:

1. Verwendung in HTML: {{ date_expression | date : format : timezone}}

Beispiel:

<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>

Das Ausgabeergebnis ist:

29. Okt. 2010 11:40:23 Uhr

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

10/29/ 2010 um 11:40 Uhr

29.10.2010 um 11:40 Uhr

2. Verwendung in Javascript: $filter('date')(date, format, timezone)

Beispiel:

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

Das Ausgabeergebnis ist:

28.01.2015

2.

Der Datumsfilter von AngularJS kann das Datum in das erforderliche Format formatieren.

Häufig verwendete Methoden:
{{jetzt |. } }

Wenn kein Format angegeben ist, verwendet AngularJS das Standardformat mediumDate

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

Das Folgende ist die integrierte Datumsformatierung von 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 -->

Jahresformatierung
Vierstelliges Jahr: {{ now | date:'yyyy' }}
Zweistelliges Jahr: {{. jetzt |. Datum:'yy' }}
Einstelliges Jahr: {{ jetzt |. Datum:'y' }}

Monatsformat
Englischer Monat: {{ now |. date:'MMMM' }}
Englische Monatsabkürzung: {{ now |. }
Numerischer Monat: {{ now |date:'MM' }}
Anzahl der Monate im Jahr: {{ jetzt |Datum:' M' }}

Datumsformatierung
Numerisches Datum: {{ jetzt |. Datum: 'dd' }}
Tag des Monats: {{ jetzt |. }
Englische Woche: {{ jetzt |. Datum:'EEEE' }}
Englische Woche-Abkürzung: { { jetzt | :'EEE' }}

Stundenformatierung
24-Stunden-numerische Stunde: {{now |. Datum:'HH'}} < ;!-- 10 -->
Stunde des Tages: {{now |. Datum:'H'}}
Numerische Stunde im 12-Stunden-Format: {{jetzt |. 'hh'}}
Die Stunde am Morgen oder Nachmittag: {{now | date:'h'}}
Minutenformatierung
Numerische Minute: {{ now |. date:'mm' }}
Minute der Stunde: { { now |. date:'m' }} !-- 43 -->
Sekundenformatierung
Numerische Sekunden: {{ now |. date:'ss' }}
Die Anzahl der Sekunden in einer Minute : {{ now |. date:'s' }}
Die Anzahl der Millisekunden: {{ now |. date:' .sss' }}
Benutzerdefiniertes Format
{{ now | date:'MMMd, y ' }}
{{ jetzt | .sss' }}

Verwandte Empfehlungen:

Detaillierte Erläuterung der Angularjs-Filter zur Implementierung von Beispielen für Sortierfunktionen

Detaillierte Einführung in Angularjs-Filter

Detaillierte Erläuterung der Angularjs-Filter zur Implementierung dynamischer Such- und Sortierfunktionen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des AngularJS-Zeitformatierungsfilters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!