it-swarm.com.de

Formatieren Sie das Datum mit Hilfe von Pipes als TT / MM / JJJJ

Ich verwende die date -Pipe, um mein Datum zu formatieren, kann aber ohne eine Problemumgehung nicht genau das gewünschte Format abrufen. Verstehe ich Rohre 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

201
Jp_

Fehler im Pipe-Datumsformat behoben in Angular 2.0.0-rc.2, diese Pull-Anforderung .

Jetzt können wir auf herkömmliche Weise vorgehen:

{{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 Informationen in der Dokumentation DatePipe

354
Fernando Leal

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

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

dabei ist serdate Ihre Datumszeichenfolge. Mal sehen, ob das hilft.

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

d- date
M- month
y-year

EDIT

Sie müssen den String locale als Argument an DatePipe übergeben, und zwar im neuesten Winkel. Ich habe in angular 4.x getestet

Zum Beispiel:

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

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

Die Verwendung einer benutzerdefinierten Pipe hat den Vorteil, dass Sie Ihre benutzerdefinierte Pipe aktualisieren können, wenn Sie das Datumsformat in Zukunft aktualisieren möchten.

Beispiele für benutzerdefinierte Rohre

17
Prashobh

Ich benutze immer Moment.js, wenn ich Daten aus irgendeinem Grund 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>
13
Oriana Ruiz

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

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

Für reines TT/MM/JJJJ funktionierte dies für mich mit angular 2 Beta 16:

{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
5
Johan Chouquet

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 z für die Zeitzone am Ende des Datums- und Zeitformats hinzu

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

Date Pipes verhalten sich in Angular 2 mit TypeScript für Safari-Browser unter MacOS und iOS nicht richtig. Ich habe dieses Problem vor kurzem konfrontiert. Ich musste moment js hier nutzen, um das Problem zu lösen. Erwähnen, was ich kurz getan habe ...

  1. Fügen Sie das momentjs npm-Paket in Ihr Projekt ein.

  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");
}
4
Nikhil

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

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

4

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

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

Ausgabe

enter image description here

Vordefinierte Formatoptionen

Beispiele finden Sie in den USA.

'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

3
Ahmer Ali Ahsan

Weitere Informationen zur Datums-Pipe finden Sie hier , z. B. zu Formaten.

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 seine Transformationsmethode verwenden, die sein wird

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

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

Ich habe diese Pfeife aus Urish benutzt, die für mich gut funktioniert:

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

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

2
Doek