Saya menggunakan datepipa untuk memformat tanggal saya, tetapi saya tidak bisa mendapatkan format yang tepat yang saya inginkan tanpa penyelesaian. Apakah saya salah memahami pipa atau tidak mungkin?

//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();
  }
}

lihat plnkr

Bug format tanggal pipa diperbaiki di Angular 2.0.0-rc.2, Permintaan Tarik ini .

Sekarang kita bisa melakukan cara konvensional:

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

Contoh:

Versi sekarang:

Example Angular 8.x.x

Versi lama:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

Info lebih lanjut dalam dokumentasi DatePipe

Impor DatePipe dari sudut / umum dan kemudian gunakan kode di bawah ini:

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

di mana userdate akan menjadi string tanggal Anda. Lihat apakah ini membantu.

Catat huruf kecil untuk tanggal dan tahun:

d- date
M- month
y-year

EDIT

Anda harus meneruskan localestring sebagai argumen ke DatePipe, dalam sudut terbaru. Saya telah menguji dalam sudut 4.x

Sebagai contoh:

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

Anda dapat mencapai ini dengan menggunakan pipa kustom sederhana.

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

Keuntungan menggunakan pipa kustom adalah bahwa, jika Anda ingin memperbarui format tanggal di masa depan, Anda dapat pergi dan memperbarui pipa kustom Anda dan itu akan mencerminkan di mana-mana.

Contoh Pipa kustom

Saya selalu menggunakan Moment.js ketika saya harus menggunakan tanggal dengan alasan apa pun.

Coba ini:

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

   }
}

Dan dalam tampilan:

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

Saya menggunakan Solusi Sementara ini:

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

Jika ada yang mencari dengan waktu dan zona waktu, ini untuk Anda

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

tambahkan z untuk zona waktu pada format tanggal dan waktu akhir

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

Sudut: 8.2.11

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

Keluaran: 9 Juni 1973

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

Output: 09/06/1973

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

Output: 09/06/1973 12:00 pagi

Satu-satunya hal yang berhasil bagi saya terinspirasi dari sini: https://stackoverflow.com/a/35527407/2310544

Untuk murni hh / MM / tttt, ini bekerja untuk saya, dengan angular 2 beta 16:

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

Jika ada yang bisa menampilkan tanggal dengan waktu di AM atau PM di sudut 6 maka ini untuk Anda.

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

Keluaran

Opsi format yang ditentukan sebelumnya

Contoh diberikan di lokal en-AS.

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

Tautan Referensi

Saya pikir itu karena lokal hardcoded ke dalam DatePipe. Lihat tautan ini:

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

Dan tidak ada cara untuk memperbarui lokal ini dengan konfigurasi sekarang.

Pipa tanggal tidak berperilaku dengan benar di Angular 2 dengan Typcript untuk browser Safari di MacOS dan iOS. Saya menghadapi masalah ini baru-baru ini. Saya harus menggunakan momen js di sini untuk menyelesaikan masalah. Menyebutkan apa yang telah saya lakukan singkatnya ...

1. Tambahkan paket npm momentjs di proyek Anda.

2. Di bawah xyz.component.html, (Perhatikan di sini bahwa startDateTime adalah string tipe data)

{{ convertDateToString(objectName.startDateTime) }}

3. Di bawah xyz.component.ts,

import * as moment from 'moment';

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

Anda dapat menemukan informasi lebih lanjut tentang pipa tanggal di sini , seperti format.

Jika Anda ingin menggunakannya dalam komponen Anda, Anda bisa melakukannya

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

Sekarang, Anda cukup menggunakan metode transformasi, yang akan menjadi

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

Anda harus meneruskan string lokal sebagai argumen ke DatePipe.

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

Opsi format yang ditentukan sebelumnya:

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

tambahkan datepipe di 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 { }

Anda juga dapat menggunakan momentjs untuk hal-hal semacam ini. Momentjs paling baik mengurai, memvalidasi, memanipulasi, dan menampilkan tanggal dalam JavaScript.

Saya menggunakan pipa ini dari Urish, yang berfungsi dengan baik untuk saya:

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

Dalam parameter args Anda dapat meletakkan format tanggal Anda seperti: "dd / mm / yyyy"

Dalam kasus saya, saya menggunakan file komponen:

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

Dan dalam file HTML komponen

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

Ini berfungsi dengan baik untuk saya ;-)