Come formattare la data come gg/MM/aaaa in Angolare 2 usando le pipe?

Question

Sto utilizzando il tubo della data per formattare la data, ma non riesco a ottenere il formato esatto che desidero senza soluzione. Sto comprendendo i tubi erroneamente o non è possibile?

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

Answer 1

tubo formato della data bug in angolare 2.0.0-rc.2, this Pull Request.

Ora possiamo fare il modo convenzionale:

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

---

Esempi:

Current Version:

Plunker Angular 5.2.x

---

prossima versione:

Plunker Angular 6.0.x

---

vecchie versioni:

Plunker Angular 2.x

Plunker Angular 4.x

---

More info in documentation DatePipe

Answer 2

Penso che sia perché il locale è insita nel DatePipe. Vedere questo link:

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

E non c'è modo di aggiornare questo locale dalla configurazione al momento.

Answer 3

Sto usando questo soluzione temporanea:

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

Answer 4

L'unica cosa che ha funzionato per me è stato ispirato da qui: https://stackoverflow.com/a/35527407/2310544

Per puro dd/MM/yyyy, questo ha funzionato per me, con angolare 2 beta 16:

{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}} 

Answer 5

Importa DatePipe da angolare/comune e quindi utilizzare il codice qui sotto

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

dove userdate sarà la stringa data. Vedere se questo aiuta.

Annotare la minuscola per la data e l'anno:

d- date 
M- month 
y-year 

Answer 6

È inoltre possibile utilizzare momentjs per questo genere di cose. Momentjs è il migliore per analizzare, convalidare, manipolare e visualizzare le date in JavaScript.

Ho usato questo tubo da Urish, che funziona bene per me:

https://github.com/urish/angular2-moment/blob/master/src/DateFormatPipe.ts

Nei args parametro si può mettere il formato della data come: "dd/mm/aaaa"

Answer 7

I usa sempre Moment.js quando ho bisogno di usare le date per qualsiasi motivo.

Prova questa:

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

    } 
} 

E nella vista:

<p>{{ date | formatDate }}</p> 

Answer 8

È possibile raggiungere questo obiettivo usando da un semplice tubo personalizzato.

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

vantaggio di utilizzare un tubo personalizzato è che, se si desidera aggiornare il formato della data, in futuro, si può andare e aggiornare il tubo di costume e si rifletterà in ogni dove.

Custom Pipe examples