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();
  }
}

Plnkr vue

150
demandé sur Fernando Leal 2016-03-02 20:51:29

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:

Plongeur Angulaire 6.x. x


Anciennes Versions:

Plongeur Angulaire 2.x

Plongeur Angulaire 4.x


Plus d'informations dans la documentation DatePipe

260
répondu Fernando Leal 2018-08-13 11:28:44

Importez DatePipe depuis angular / common, puis utilisez le code ci-dessous:

var datePipe = new DatePipe();
    this.setDob = datePipe.transform(userdate, 'dd/MM/yyyy');

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');
60
répondu Prashanth 2018-07-18 00:01:45

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.

Exemples de tuyaux personnalisés

14
répondu Prashobh 2017-04-04 14:07:16

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>
11
répondu Oriana Ruiz 2016-12-15 14:02:13

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');
        }
    }
}
10
répondu Deepak rao 2017-08-13 10:20:17

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'}}
3
répondu Johan Chouquet 2017-05-23 12:34:45

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.

3
répondu Thierry Templier 2016-12-05 16:52:03

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"

1
répondu Doek 2016-06-20 20:44:43

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'}}
1
répondu ULLAS K 2018-06-13 07:22:11

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.

0
répondu Nikhil Bhalwankar 2018-04-07 18:29:12

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');
0
répondu yushin 2018-09-04 12:47:53

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

entrez la description de l'image ici

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

Lien De Référence

-1
répondu Ahmer Ali Ahsan 2018-09-17 21:31:16