Formater la date au format jj / mm / aaaa à l'aide de canaux


257

J'utilise le datecanal 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-ce 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();
  }
}

vue plnkr


2
La datepipe a actuellement plusieurs problèmes.
Günter Zöchbauer

Ce candidat à la sortie semble encore un peu inachevé. C'est le deuxième problème que j'ai trébuché en 2 jours .. j'espère qu'ils le corrigeront bientôt. Créer vos propres tuyaux pour cela est une option, mais cela ressemble un peu à une duplication .. et vous pouvez le supprimer dans quelques mois ..
Maarten Kieft



Réponses:


467

Bogue de format de date de canal corrigé dans Angular 2.0.0-rc.2, cette demande de tirage .

Maintenant, nous pouvons faire de la manière conventionnelle:

{{valueDate | date: 'dd/MM/yyyy'}}

Exemples:

Version actuelle:

Example Angular 8.x.x


Anciennes versions:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x


Plus d'informations dans la documentation DatePipe


1
merci, je voudrais juste ajouter des conseils supplémentaires pour le problème de format IE11 ++, cf. stackoverflow.com/questions/39728481/…
boly38

Dans Angular 5, cela a apparemment été résolu @ boly38, suivez la mise à jour en réponse. Et ma réponse en question liée: stackoverflow.com/a/46218711/2290538
Fernando Leal

Je reçois la date de l'API en tant que dob: "2019-02-05 00:00:00". Je veux supprimer 00:00:00 et j'ai un formulaire piloté par modèle en angulaire 6. Mon champ de saisie est donné ici. <input #dob="ngModel" [(ngModel)]="model.dob" [ngClass]="{ 'is-invalid': f.submitted && dob.invalid }" class="form-control" id="dob" name="dob" required type="date" /> Comment puis-je réparer cela ?
Denuka

@FernandoLeal - C'est incroyable. Merci pour cela.
Josh

ce ne sera pas traduisible.
Aamer Shahzad

86

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. Voyez si cela aide.

Notez les minuscules pour la date et l'année:

d- date
M- month
y-year

ÉDITER

Vous devez passer la localechaîne comme argument à DatePipe, dans le dernier angulaire. J'ai testé en angulaire 4.x

Par exemple:

var datePipe = new DatePipe('en-US');

Cela, pour une raison quelconque, semble être très lourd. Nous faisons la même chose (sur la détection des changements) et cela prend 75% du temps d'exécution de notre application
sixtyfootersdude

7
Avec angulaire 2.1.1, cette erreur est lancée Supplied parameters do not match any signature of call target.surnew DatePipe()
saiy2k

6
Vous pouvez utiliser quelque chose commenew DatePipe('en-US');
Chad Kuehn

Salut, je veux ce même format en angular2 comme le 26 janvier, (je ne veux pas l'année) comment?
yala ramesh

HIPrashanth, je reçois l'erreur «Rejet de la promesse non gérée: aucun fournisseur pour DatePipe! '.
MMR

19

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 canal personnalisé est que, si vous souhaitez mettre à jour le format de date à l'avenir, vous pouvez aller mettre à jour votre canal personnalisé et il reflétera partout.

Exemples de tuyaux personnalisés


14

J'utilise toujours Moment.js lorsque j'ai besoin d'utiliser des dates pour une raison quelconque.

Essaye ça:

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>

8
momentla bibliothèque est trop grande pour un petit travail comme le format!
Al-Mothafar

@Oriana, belle réponse. Je l'utilise de cette façon; item.deferredStartDate = item.deferredStartDate? moment (item.deferredStartDate) .toDate (): null; C'est tout à fait la même chose que votre implémentation.
Kushan Randima

12

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

Je suis nouveau sur angular 2 et j'ai du mal à démarrer. Je l'ai ajouté dans son propre fichier TS (compilé en js). J'ai essayé plusieurs choses, notamment en l'ajoutant en tant que fournisseur sur le composant d'application, puis dans le constructeur de mon composant enfant, mais je n'ai pas pu le faire fonctionner. L'erreur est; Msgstr "Le tube 'dateFormat' est introuvable". Pouvez-vous me donner un bref aperçu de la façon de mettre en œuvre cela s'il vous plaît. Voici les packages que j'utilise "dépendances": {"angular2": "2.0.0-beta.17", "systemjs": "0.19.25", "es6-shim": "^ 0.35.0", " réfléchir-métadonnées ":" 0.1.2 "," rxjs ":" 5.0.0-beta.2 "," zone.js ":" 0.6.10 "},
Craig B

Pouvez-vous s'il vous plaît plunker votre code que je ferai une correction. Veuillez utiliser la dernière version d'angular2
Deepak

@Deepakrao Qu'est-ce que «pt» ici? Et comment puis-je appeler ce tuyau dans mon composant? comme let date = new DateFormat (). transform (input); S'il vous plaît corrigez-moi. Et si je veux afficher hh: mm, c'est-à-dire le temps
Protagonist

11

Si quelqu'un regarde avec l'heure 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'}}

7

Angulaire: 8.2.11

<td>{{ data.DateofBirth | date }}</td>

Sortie: 9 juin 1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy' }}</td>

Sortie: 09/06/1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy hh:mm a' }}</td>

Sortie: 09/06/1973 12:00 AM


Les deuxième et troisième exemples sont les mêmes et génèrent des sorties différentes?
Jp_

5

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

c'est un hack assez lisible pour les versions bêta, je ne sais pas pourquoi il a été rétrogradé mais je le ramènerai à zéro;)
Sam Vloeberghs

5

Si quelqu'un peut afficher la date et l'heure en AM ou PM en angulaire 6, c'est pour vous.

{{date | date: 'dd/MM/yyyy hh:mm a'}}

Production

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



4

Les canaux de date ne se comportent pas correctement dans Angular 2 avec le navigateur Typescript pour Safari sur MacOS et iOS. J'ai rencontré ce problème récemment. J'ai dû utiliser l'instant js ici pour résoudre le problème. Mentionner ce que j'ai fait en bref ...

  1. Ajoutez le package momentjs npm dans votre projet.

  2. Sous xyz.component.html, (Notez ici que startDateTime est de type chaîne de données)

{{ convertDateToString(objectName.startDateTime) }}

  1. Sous xyz.component.ts,

import * as moment from 'moment';

convertDateToString(dateToBeConverted: string) {
return moment(dateToBeConverted, "YYYY-MM-DD HH:mm:ss").format("DD-MMM-YYYY");
}

1
Il serait utile que vous montriez le code que vous avez utilisé avec momentjs pour que quiconque souhaitant essayer cette solution n'ait pas à le découvrir.
Fabuleux

Mise à jour de mon commentaire avec solution. Vérifiez s'il vous plaît.
Nikhil

3

Vous pouvez trouver plus d'informations sur le tube de date ici , comme les formats.

Si vous souhaitez 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');

3

Vous devez passer la chaîne de paramètres régionaux comme argument à DatePipe.

var ddMMyyyy = this.datePipe.transform(new Date(),"dd-MM-yyyy");

Options de format prédéfinies:

1.      'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
2.      'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
3.      'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
4.      'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
5.      'shortDate': equivalent to 'M/d/yy' (6/15/15).
6.      'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
7.      'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
8.      'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
9.      'shortTime': equivalent to 'h:mm a' (9:03 AM).
10. 'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
11. 'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
12. 'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

ajouter datepipe dans app.component.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DatePipe} from '@angular/common';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    DatePipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2

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é cette pipe 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"


lien cassé, le lien est maintenant github.com/urish/angular2-moment/blob/master/src/…
Tony

0

Dans mon cas, j'utilise dans le fichier composant:

import {formatDate} from '@angular/common';

// Use your preferred locale
import localeFr from '@angular/common/locales/fr';
import { registerLocaleData } from '@angular/common';

// ....

displayDate: string;
registerLocaleData(localeFr, 'fr');
this.displayDate = formatDate(new Date(), 'EEEE d MMMM yyyy', 'fr');

Et dans le fichier HTML du composant

<h1> {{ displayDate }} </h1>

Ça fonctionne bien pour moi ;-)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.