Comment formater la date comme JJ / MM / AAAA dans Angular 2 en utilisant des tuyaux?
J'utilise le canal de date pour formater ma date, mais je ne peux tout simplement pas obtenir le format exact que je veux sans solution de contournement. Est-ce que je comprends mal les tuyaux ou n'est tout simplement pas possible?
//our root app component
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
<h3>{{date | date: 'ddMMyyyy'}}, should be
{{date | date: 'dd'}}/{{date | date:'MM'}}/{{date | date: 'yyyy'}}</h3>
</div>
`,
directives: []
})
export class App {
constructor() {
this.name = 'Angular2'
this.date = new Date();
}
}
12 réponses
Bug de format de date de tuyau corrigé dans Angular 2.0.0-rc.2, Cette demande de traction .
Maintenant, nous pouvons faire de manière conventionnelle:
{{valueDate | date: 'dd/MM/yyyy'}}
Exemples:
Version Actuelle:
Anciennes Versions:
Importez DatePipe depuis angular / common, puis utilisez le code ci-dessous:
var datePipe = new DatePipe();
this.setDob = datePipe.transform(userdate, 'dd/MM/yyyy');
Où userdate sera votre chaîne de date. Voir si cela aide.
Notez les minuscules pour la date et l'année:
d- date
M- month
y-year
Modifier
Vous devez passer locale string comme argument à DatePipe, dans latest angular. J'ai testé dans angular 4.x
Par Exemple:
var datePipe = new DatePipe('en-US');
Vous pouvez y parvenir en utilisant un simple tuyau personnalisé.
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
@Pipe({
name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
transform(value: string) {
var datePipe = new DatePipe("en-US");
value = datePipe.transform(value, 'dd/MM/yyyy');
return value;
}
}
{{currentDate | dateFormatPipe }}
L'avantage d'utiliser un tuyau personnalisé est que, si vous voulez mettre à jour le format de date à l'avenir, vous pouvez aller mettre à jour votre tuyau personnalisé et il reflétera partout.
J'utilise toujours le Moment.js quand j'ai besoin d'utiliser des dates pour une raison quelconque.
Essayez ceci:
import { Pipe, PipeTransform } from '@angular/core'
import * as moment from 'moment'
@Pipe({
name: 'formatDate'
})
export class DatePipe implements PipeTransform {
transform(date: any, args?: any): any {
let d = new Date(date)
return moment(d).format('DD/MM/YYYY')
}
}
Et dans la vue:
<p>{{ date | formatDate }}</p>
J'utilise cette Solution temporaire:
import {Pipe, PipeTransform} from "angular2/core";
import {DateFormatter} from 'angular2/src/facade/intl';
@Pipe({
name: 'dateFormat'
})
export class DateFormat implements PipeTransform {
transform(value: any, args: string[]): any {
if (value) {
var date = value instanceof Date ? value : new Date(value);
return DateFormatter.format(date, 'pt', 'dd/MM/yyyy');
}
}
}
La seule chose qui a fonctionné pour moi a été inspirée d'ici: https://stackoverflow.com/a/35527407/2310544
Pour JJ/MM/AAAA pur, cela a fonctionné pour moi, avec angular 2 beta 16:
{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
Je pense que c'est parce que les paramètres régionaux sont codés en dur dans le DatePipe. Voir ce lien:
Et il n'y a aucun moyen de mettre à jour ces paramètres régionaux par configuration en ce moment.
Vous pouvez également utiliser momentjs pour ce genre de choses. Momentjs est le meilleur pour analyser, valider, manipuler et afficher les dates en JavaScript.
J'ai utilisé ce tuyau D'Urish, qui fonctionne bien pour moi:
Https://github.com/urish/angular2-moment/blob/master/src/DateFormatPipe.ts
Dans le paramètre args vous pouvez mettre votre format de date comme: "jj/mm/aaaa"
Si quelqu'un regarde avec le temps et le fuseau horaire, c'est pour vous
{{data.ct | date :'dd-MMM-yy h:mm:ss a '}}
Ajouter z pour le fuseau horaire à la fin du format de date et d'heure
{{data.ct | date :'dd-MMM-yy h:mm:ss a z'}}
Date pipes ne se comporte pas correctement dans Angular 2 avec Typescript pour le navigateur Safari sur MacOS et iOS. J'ai fait face à ce problème récemment. J'ai dû utiliser moment js ici pour résoudre le problème.
Vous pouvez trouver plus d'informations sur le tube de date ici, tels que les formats.
Si vous voulez l'utiliser dans votre composant, vous pouvez simplement faire
pipe = new DatePipe('en-US'); // Use your own locale
Maintenant, vous pouvez simplement utiliser sa méthode de transformation, qui sera
const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');
Si quelqu'un peut chercher à afficher la date avec l'heure en AM ou PM dans angular 6 alors c'est pour vous.
{{date | date: 'dd/MM/yyyy hh:mm a'}}
Sortie
Options de format prédéfinies
Des exemples sont donnés dans les paramètres régionaux en-US.
'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
'shortDate': equivalent to 'M/d/yy' (6/15/15).
'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
'shortTime': equivalent to 'h:mm a' (9:03 AM).
'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).