Ich möchte das Datum im europäischen Format anzeigen, dd/MM/yyyy
aber im DatePipe shortDate- Format wird es nur im US-Datumsstil angezeigt MM/dd/yyyy
.
Ich gehe davon aus, dass das Standardgebietsschema en_US ist. Möglicherweise fehlt es mir in den Dokumenten, aber wie kann ich die Standardeinstellungen für das Gebietsschema in einer Angular2-App ändern? Oder gibt es eine Möglichkeit, ein benutzerdefiniertes Format an DatePipe zu übergeben?
javascript
angular
date-pipe
nsbm
quelle
quelle
Antworten:
Ab Angular2 RC6 können Sie das Standardgebietsschema in Ihrem App-Modul festlegen, indem Sie einen Anbieter hinzufügen:
Die Pipes Currency / Date / Number sollten das Gebietsschema übernehmen. LOCALE_ID ist ein OpaqueToken , das aus Angular / Core importiert werden soll.
Für einen fortgeschritteneren Anwendungsfall möchten Sie möglicherweise das Gebietsschema von einem Dienst abrufen. Das Gebietsschema wird (einmal) aufgelöst, wenn eine Komponente mit Datums-Pipe erstellt wird:
Hoffe es funktioniert bei dir.
quelle
new CurrencyPipe('en-US');
. Hoffentlich ist dies für etwas nützlich, da dies als erstes Ergebnis beim Googeln meines Problems angezeigt wurde.Die Lösung mit LOCALE_ID ist ideal, wenn Sie die Sprache für Ihre App einmal festlegen möchten. Aber es funktioniert nicht, wenn Sie die Sprache zur Laufzeit ändern möchten. In diesem Fall können Sie eine benutzerdefinierte Datums-Pipe implementieren.
Wenn Sie nun die App-Anzeigesprache mit TranslateService ändern (siehe ngx-translate )
Die Formate in Ihrer App sollten automatisch aktualisiert werden.
Anwendungsbeispiel:
oder überprüfen Sie mein einfaches "Notizen" -Projekt hier .
quelle
Mit
angular5
der obigen Antwort funktioniert das nicht mehr!Der folgende Code:
app.module.ts
Führt zu folgendem Fehler:
Mit müssen
angular5
Sie die verwendete Gebietsschemadatei selbst laden und registrieren.app.module.ts
Dokumentation
quelle
registerLocaleData
das genug war, nun, es ist nicht.Wenn Sie
TranslateService
from verwenden@ngx-translate/core
, finden Sie unten eine Version ohne Erstellen einer neuen Pipe, die mit dynamischem Umschalten zur Laufzeit arbeitet (getestet in Angular 7). Verwenden des DatePipe-locale
Parameters ( docs ):Deklarieren Sie zunächst die Gebietsschemas, die Sie in Ihrer App verwenden, z. B
app.component.ts
.:Verwenden Sie dann Ihre Pfeife dynamisch:
myComponent.component.html
myComponent.component.ts
quelle
Ich habe in date_pipe.ts nachgesehen und es enthält zwei interessante Informationen. In der Nähe der Oberseite befinden sich die folgenden zwei Zeilen:
Ganz unten steht diese Zeile:
Dies deutet darauf hin, dass die Datumspipe derzeit fest codiert ist, um "en-US" zu sein.
Bitte klären Sie mich auf, wenn ich falsch liege.
quelle
Fügen Sie auf app.module.ts die folgenden Importe hinzu. Es gibt eine Liste von LOCALE Optionen hier .
Fügen Sie dann den Anbieter hinzu
Verwenden Sie Pipes in HTML. Hier ist die eckige Dokumentation dazu.
quelle
Du machst so etwas:
{{ dateObj | date:'shortDate' }}
oder
{{ dateObj | date:'ddmmy' }}
Siehe: https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html
quelle
Ich hatte mit dem gleichen Problem zu kämpfen und arbeitete nicht für mich damit
Also habe ich eine Problemumgehung versucht, nicht die beste Lösung, aber es hat funktioniert:
Ich kann immer eine benutzerdefinierte Pipe erstellen.
quelle
Für diejenigen, die Probleme mit AOT haben, müssen Sie es mit einer useFactory etwas anders machen:
quelle
{ provide: LOCALE_ID, useFactory: () => 'fr-CA'}
hat den Trick für mich gemacht;)Durch das Kopieren der Google-Pipe wurde das Gebietsschema geändert und es funktioniert für mein Land. Es ist möglich, dass sie es nicht für alle Gebietsschemas fertiggestellt haben. Unten ist der Code.
quelle
Ok, ich schlage diese Lösung vor, sehr einfach, mit
ngx-translate
quelle
Dies mag etwas spät sein, aber in meinem Fall (Winkel 6) habe ich eine einfache Pipe über DatePipe erstellt, ungefähr so:
Vielleicht nicht die beste Lösung, aber einfach und funktioniert.
quelle