web-dev-qa-db-fra.com

Formatez la date en jj / mm / aaaa en utilisant des pipes

J'utilise le tube date pour formater ma date, mais je ne peux tout simplement pas obtenir le format exact que je souhaite sans solution de contournement. Est-ce que je comprends mal les tuyaux ou est-ce simplement impossible?

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

dateangularangular-pipedate-pipe
201
Jp_

Correction du bogue de format de date de pipe dans Angular 2.0.0-rc.2, cette demande d'extraction .

Maintenant nous pouvons faire 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

354
Fernando Leal

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

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

où serdate 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

EDIT

Vous devez passer la chaîne locale comme argument à DatePipe, dans le dernier angle. J'ai testé dans angular 4.x

Par exemple:

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

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 mettre à jour votre canal personnalisé et il sera reflété partout.

exemples de tuyaux personnalisés

17
Prashobh

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>
13
Oriana Ruiz

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

La seule chose qui a fonctionné pour moi a été inspirée ici: https://stackoverflow.com/a/35527407/2310544

Pour jj/mm/aaaa, cela a fonctionné pour moi, avec angular 2 beta 16:

{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
5
Johan Chouquet

Si quelqu'un cherche avec le temps et le fuseau horaire, ceci est pour vous

 {{data.ct | date :'dd-MMM-yy h:mm:ss a '}}

ajoutez z pour le fuseau horaire à la fin du format de date et heure

 {{data.ct | date :'dd-MMM-yy h:mm:ss a z'}}
5
ULLAS K

Les tubes de données ne se comportent pas correctement dans Angular 2 avec le navigateur TypeScript pour Safari sur MacOS et iOS. J'ai fait face à ce problème récemment. Je devais utiliser moment js ici pour résoudre le problème. Mentionnant ce que j'ai fait en bref ...

  1. Ajoutez le paquet momentjs npm à 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");
}
4
Nikhil

Je pense que c'est parce que la locale est codée 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 pour le moment.

4
Thierry Templier

Si quelqu'un peut vouloir afficher la date avec l'heure en AM ou PM en angular 6, alors ceci est pour vous.

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

Sortie

enter image description here

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

3
Ahmer Ali Ahsan

Vous pouvez trouver plus d'informations sur le canal 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');
2
Yushin

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 me convient parfaitement:

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"

2
Doek