Formatieren Sie das Datum mithilfe von Pipes als TT / MM / JJJJ

257

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

Jp_
quelle
2
Die datePipe hat derzeit mehrere Probleme.
Günter Zöchbauer
Dieser Release-Kandidat fühlt sich noch ein bisschen unvollendet. Dies ist das zweite Problem, über das ich in 2 Tagen gestolpert bin. Hoffentlich werden sie es bald beheben. Das Erstellen eigener Pipes dafür ist eine Option, aber es fühlt sich ein bisschen wie eine Vervielfältigung an. Und Sie können sie in ein paar Monaten entfernen.
Maarten Kieft

Antworten:

466

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

Fernando Leal
quelle
1
danke, möchte nur zusätzliche Tipps für das Problem mit dem IE11 ++ - Format anhängen, vgl. stackoverflow.com/questions/39728481/…
boly38
In Angular 5 wurde dies anscheinend @ boly38 gelöst, folgen Sie dem Update als Antwort. Und meine Antwort in Frage verlinkt: stackoverflow.com/a/46218711/2290538
Fernando Leal
Ich erhalte ein Datum von der API als dob: "2019-02-05 00:00:00". Ich möchte 00:00:00 entfernen und habe eine vorlagengesteuerte Form in Winkel 6. Mein Eingabefeld wird hier angegeben. <input #dob="ngModel" [(ngModel)]="model.dob" [ngClass]="{ 'is-invalid': f.submitted && dob.invalid }" class="form-control" id="dob" name="dob" required type="date" /> Wie kann ich das beheben?
Denuka
@ FernandoLeal - Das ist unglaublich. Danke dafür.
Josh
Dies ist nicht übersetzbar.
Aamer Shahzad
86

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');
Prashanth
quelle
Dies scheint aus irgendeinem Grund sehr schwer zu sein. Wir machen das Gleiche (bei der Erkennung von Änderungen) und es dauert 75% der Ausführungszeit unserer App
sechzig Fuß vom
7
Mit kantigen 2.1.1 wird dieser Fehler geworfen Supplied parameters do not match any signature of call target.aufnew DatePipe()
saiy2k
6
Sie können so etwas wienew DatePipe('en-US');
Chad Kuehn
Hallo, ich möchte dasselbe Format in Angular2 wie am 26. Januar (ich möchte kein Jahr) wie?
Yala Ramesh
HIPrashanth, ich erhalte die Fehlermeldung 'Unhandled Promise Ablehnung: Kein Anbieter für DatePipe! '.
MMR
19

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

Prashobh
quelle
14

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>
Oriana Ruiz
quelle
8
momentBibliothek ist zu groß für einen kleinen Job wie das Format!
Al-Mothafar
@Oriana, nette Antwort. Ich benutze es so; item.deferredStartDate = item.deferredStartDate? moment (item.deferredStartDate) .toDate (): null; Es ist genau so wie Ihre Implementierung.
Kushan Randima
12

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');
        }
    }
}
Deepak
quelle
Ich bin neu in Winkel 2 und habe Probleme, dies in Gang zu bringen. Ich habe es in einer eigenen TS-Datei hinzugefügt (kompiliert zu js). Ich habe verschiedene Dinge ausprobiert, einschließlich des Hinzufügens als Anbieter für die App-Komponente und dann im Konstruktor meines untergeordneten Compoments, aber ich konnte es nicht zum Laufen bringen. Fehler ist; "Die Pipe 'dateFormat' wurde nicht gefunden". Können Sie mir bitte einen kurzen Überblick über die Implementierung geben? Hier sind die Pakete, die ich "Abhängigkeiten" verwende: {"angle2": "2.0.0-beta.17", "systemjs": "0.19.25", "es6-shim": "^ 0.35.0", " Reflect-Metadaten ":" 0.1.2 "," rxjs ":" 5.0.0-beta.2 "," zone.js ":" 0.6.10 "},
Craig B
Können Sie bitte Ihren Code plunkern, ich werde Korrekturen vornehmen. Bitte verwenden Sie die neueste Version von angle2
Deepak
@Deepakrao Was ist 'pt' hier? Und wie nenne ich diese Pipe in meiner Komponente? wie let date = new DateFormat (). transform (Eingabe); Bitte korrigieren Sie mich. Und was ist, wenn ich hh: mm anzeigen möchte, dh Zeit
Protagonist
11

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'}}
ULLAS K.
quelle
7

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

RM Shahidul Islam Shahed
quelle
Das zweite und dritte Beispiel sind gleich und erzeugen unterschiedliche Ausgaben?
Jp_
5

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'}}
Johan Chouquet
quelle
Dies ist ein ziemlich lesbarer Hack für Beta-Versionen, ich weiß nicht, warum er herabgestuft wurde, aber ich werde ihn wieder auf Null bringen;)
Sam Vloeberghs
5

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

Geben Sie hier die Bildbeschreibung ein

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

Ahmer Ali Ahsan
quelle
4

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

  1. 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");
}
Nikhil
quelle
1
Es wäre hilfreich, wenn Sie den Code anzeigen würden, den Sie mit momentjs verwendet haben, damit jeder, der diese Lösung ausprobieren möchte, es nicht noch herausfinden muss.
Fabelhafter
Mein Kommentar wurde mit Lösung aktualisiert. Bitte prüfen.
Nikhil
3

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');
Yushin
quelle
3

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 { }
Tienanhvn
quelle
2

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"

Doek
quelle
Link defekt, Link ist jetzt github.com/urish/angular2-moment/blob/master/src/…
Tony
0

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

Sébastien REMY
quelle