Sto usando la datepipe per formattare la mia data, ma non riesco proprio a ottenere il formato esatto che voglio senza una soluzione alternativa. Sto capendo le pipe in modo errato o semplicemente 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();
  }
}

vista plnkr

Bug nel formato della data della pipe corretto in Angular 2.0.0-rc.2, questa richiesta pull .

Ora possiamo fare in modo convenzionale:

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

Esempi:

Versione attuale:

Example Angular 8.x.x

Vecchie versioni:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

Maggiori informazioni nella documentazione DatePipe

Importa DatePipe da angolare / comune e quindi utilizza il codice seguente:

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

dove userdate sarà la tua stringa della data. Vedi se questo aiuta.

Prendi nota delle lettere minuscole per data e anno:

d- date
M- month
y-year

MODIFICARE

Devi passare la localestringa come argomento a DatePipe, nell'ultima angolare. Ho testato in 4.x angolare

Per esempio:

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

Puoi ottenerlo usando una semplice pipe personalizzata.

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

Il vantaggio di utilizzare una pipe personalizzata è che, se si desidera aggiornare il formato della data in futuro, è possibile andare ad aggiornare la pipe personalizzata e si rifletterà ovunque.

Esempi di tubi personalizzati

Uso sempre Moment.js quando devo utilizzare le date per qualsiasi motivo.

Prova questo:

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>

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

Se qualcuno guarda con il tempo e il fuso orario, questo è per te

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

aggiungi z per il fuso orario alla fine della data e il formato dell'ora

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

Angolare: 8.2.11

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

Uscita: 9 giugno 1973

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

Uscita: 09/06/1973

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

Uscita: 09/06/1973 12:00 AM

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

Per puro gg / MM / aaaa, questo ha funzionato per me, con angular 2 beta 16:

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

Se qualcuno può cercare di visualizzare la data con l'ora in AM o PM in angolare 6, questo è per te.

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

Produzione

Opzioni di formato predefinite

Esempi sono riportati nelle impostazioni internazionali 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).

Link di riferimento

Penso che sia perché il locale è hardcoded in DatePipe. Vedi questo link:

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

E al momento non è possibile aggiornare questa impostazione locale tramite la configurazione.

Le pipe di data non si comportano correttamente in Angular 2 con Typescript per il browser Safari su MacOS e iOS. Ho affrontato questo problema di recente. Ho dovuto usare js moment qui per risolvere il problema. Menzionando ciò che ho fatto in breve ...

1. Aggiungi il pacchetto momentpm npm nel tuo progetto.

2. Sotto xyz.component.html, (nota che startDateTime è di tipo stringa di dati)

{{ convertDateToString(objectName.startDateTime) }}

3. Sotto xyz.component.ts,

import * as moment from 'moment';

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

Puoi trovare ulteriori informazioni sulla pipe della data qui , come i formati.

Se vuoi usarlo nel tuo componente, puoi semplicemente farlo

pipe = new DatePipe('en-US'); // Use your own locale

Ora, puoi semplicemente usare il suo metodo di trasformazione, che sarà

const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');

Devi passare la stringa della locale come argomento a DatePipe.

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

Opzioni di formato predefinite:

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

aggiungi datepipe in 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 { }

Puoi anche usare momentjs per questo tipo di cose. Momentjs è il migliore per analizzare, convalidare, manipolare e visualizzare le date in JavaScript.

Ho usato questa pipa di Urish, che funziona bene per me:

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

Nel parametro args puoi inserire il formato della tua data come: "gg / mm / aaaa"

Nel mio caso, utilizzo nel file componente:

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

E nel file HTML componente

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

Funziona bene per me ;-)