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

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

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

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

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>

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

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

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

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

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

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

Je pense que c'est parce que les paramètres régionaux sont codés en dur dans le DatePipe. Voir ce lien:

• https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/date_pipe.ts

Et il n'y a aucun moyen de mettre à jour cette locale par configuration pour le moment.

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

3. 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");
}

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

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

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"

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