Ich verwende die datePipe, um mein Datum zu formatieren, aber ohne eine Problemumgehung kann ich nicht genau das gewünschte Format erhalten. Verstehe ich Pfeifen falsch oder ist das einfach nicht möglich?

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

Fehler beim Pipe-Datumsformat in Angular 2.0.0-rc.2, dieser Pull-Anforderung, behoben .

Jetzt können wir den herkömmlichen Weg gehen:

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

Beispiele:

Aktuelle Version:

Example Angular 8.x.x

Alte Versionen:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

Weitere Infos in der Dokumentation DatePipe

Importieren Sie DatePipe aus Angular / Common und verwenden Sie den folgenden Code:

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

Dabei ist userdate Ihre Datumszeichenfolge. Sehen Sie, ob dies hilft.

Notieren Sie sich den Kleinbuchstaben für Datum und Jahr:

d- date
M- month
y-year

BEARBEITEN

Sie müssen eine localeZeichenfolge als Argument an DatePipe im neuesten Winkel übergeben. Ich habe in Winkel 4.x getestet

Beispielsweise:

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

Sie können dies mit einem einfachen benutzerdefinierten Rohr erreichen.

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

Der Vorteil der Verwendung einer benutzerdefinierten Pipe besteht darin, dass Sie, wenn Sie das Datumsformat in Zukunft aktualisieren möchten, Ihre benutzerdefinierte Pipe aktualisieren können und sie überall wiedergibt.

Beispiele für benutzerdefinierte Rohre

Ich benutze Moment.js immer, wenn ich aus irgendeinem Grund Datumsangaben verwenden muss.

Versuche dies:

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

   }
}

Und in der Ansicht:

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

Ich verwende diese temporäre Lösung:

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

Wenn jemand mit Zeit und Zeitzone sucht, ist dies für Sie

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

Fügen Sie am Ende des Datums- und Zeitformats z für die Zeitzone hinzu

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

Winkel: 8.2.11

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

Ausgabe: 9. Juni 1973

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

Ausgabe: 09/06/1973

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

Ausgabe: 06.09.1973 00:00 Uhr

Das einzige, was für mich funktioniert hat, wurde von hier inspiriert: https://stackoverflow.com/a/35527407/2310544

Für reines TT / MM / JJJJ funktionierte dies bei mir mit Winkel 2 Beta 16:

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

Wenn jemand das Datum mit der Uhrzeit in AM oder PM in Winkel 6 anzeigen kann, ist dies das Richtige für Sie.

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

Ausgabe

Vordefinierte Formatoptionen

Beispiele sind im Gebietsschema en-US angegeben.

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

Referenzlink

Ich denke, das liegt daran, dass das Gebietsschema in der fest codiert ist DatePipe. Siehe diesen Link:

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

Derzeit gibt es keine Möglichkeit, dieses Gebietsschema durch Konfiguration zu aktualisieren.

Datumsangaben verhalten sich in Angular 2 mit Typescript für Safari unter MacOS und iOS nicht korrekt. Ich habe mich kürzlich mit diesem Problem befasst. Ich musste moment js hier verwenden, um das Problem zu lösen. Erwähnen, was ich kurz getan habe ...

1. Fügen Sie Ihrem Projekt das Paket momentjs npm hinzu.

2. Unter xyz.component.html (Beachten Sie hier, dass startDateTime vom Datentyp string ist)

{{ convertDateToString(objectName.startDateTime) }}

3. Unter xyz.component.ts,

import * as moment from 'moment';

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

Weitere Informationen zur Datumsangabe finden Sie hier , z. B. Formate.

Wenn Sie es in Ihrer Komponente verwenden möchten, können Sie dies einfach tun

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

Jetzt können Sie einfach die Transformationsmethode verwenden, die es sein wird

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

Sie müssen die Gebietsschemazeichenfolge als Argument an DatePipe übergeben.

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

Vordefinierte Formatoptionen:

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

Datepipe in app.component.module.ts hinzufügen

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

Sie können auch momentjs für diese Art von Dingen verwenden. Momentjs ist am besten geeignet , Daten in JavaScript zu analysieren, zu validieren, zu bearbeiten und anzuzeigen.

Ich habe diese Pfeife von Urish verwendet, die für mich gut funktioniert:

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

Im Parameter args können Sie Ihr Datumsformat wie folgt eingeben: "TT / MM / JJJJ"

In meinem Fall verwende ich in der Komponentendatei:

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

Und in der Komponente HTML-Datei

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

Es funktioniert gut für mich ;-)