ฉันใช้dateไพพ์เพื่อจัดรูปแบบวันที่ของฉัน แต่ฉันไม่สามารถรับรูปแบบที่แน่นอนที่ฉันต้องการได้หากไม่มีวิธีแก้ปัญหา ฉันเข้าใจท่อผิดหรือเป็นไปไม่ได้

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

แก้ไขข้อผิดพลาดของรูปแบบวันที่ไปป์ใน Angular 2.0.0-rc.2 คำขอดึงข้อมูลนี้

ตอนนี้เราสามารถทำวิธีธรรมดา:

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

ตัวอย่าง:

รุ่นปัจจุบัน:

Example Angular 8.x.x

เวอร์ชั่นเก่า:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

ข้อมูลเพิ่มเติมในเอกสาร DatePipe

นำเข้า DatePipe จากเชิงมุม / ทั่วไปแล้วใช้รหัสด้านล่าง:

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

โดยที่ userdate จะเป็นสตริงวันที่ของคุณ ดูว่าสิ่งนี้จะช่วยให้

ทำเครื่องหมายตัวพิมพ์เล็กสำหรับวันที่และปี:

d- date
M- month
y-year

แก้ไข

คุณต้องผ่านlocaleสตริงเป็นอาร์กิวเมนต์ไปยัง DatePipe ในเชิงมุมล่าสุด ฉันทดสอบในเชิงมุม 4.x

ตัวอย่างเช่น:

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

คุณสามารถทำได้โดยใช้ไปป์ที่กำหนดเองง่าย ๆ

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

ข้อดีของการใช้ไปป์ที่กำหนดเองคือถ้าคุณต้องการอัปเดตรูปแบบวันที่ในอนาคตคุณสามารถไปและอัปเดตไปป์ที่กำหนดเองของคุณและมันจะสะท้อนทุกที่

ตัวอย่าง Pipe แบบกำหนดเอง

ฉันมักจะใช้ Moment.js เมื่อฉันต้องการใช้วันที่ด้วยเหตุผลใดก็ตาม

ลองสิ่งนี้:

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

   }
}

และในมุมมอง:

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

ฉันใช้โซลูชันชั่วคราวนี้:

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

หากใครที่มองหาเวลาและเขตเวลานี่เหมาะสำหรับคุณ

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

เพิ่ม z สำหรับเขตเวลาในตอนท้ายของรูปแบบวันที่และเวลา

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

เชิงมุม: 8.2.11

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

เอาท์พุต: 9 มิ.ย. 1973

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

ผลลัพธ์: 09/06/1973

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

ผลลัพธ์: 09/06/1973 12:00 AM

สิ่งเดียวที่ใช้ได้ผลกับฉันคือแรงบันดาลใจจากที่นี่: https://stackoverflow.com/a/35527407/2310544

สำหรับ pure dd / MM / yyyy สิ่งนี้ใช้ได้กับฉันด้วย angular 2 beta 16:

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

หากใครที่ต้องการดูวันที่แสดงเวลาเป็น AM หรือ PM เป็นเหลี่ยม 6 นี่จะเหมาะสำหรับคุณ

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

เอาท์พุต

ตัวเลือกรูปแบบที่กำหนดไว้ล่วงหน้า

ตัวอย่างมีให้ในภาษาของสหรัฐอเมริกา

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

ลิงค์อ้างอิง

ผมคิดว่ามันเป็นเพราะสถานที่เกิดเหตุเป็น hardcoded DatePipeเข้าไปใน ดูลิงค์นี้:

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

และไม่มีวิธีการอัปเดตสถานที่นี้ตามการกำหนดค่าในขณะนี้

ไพพ์วันที่ทำงานไม่ถูกต้องใน Angular 2 ที่มี Typescript สำหรับเบราว์เซอร์ Safari บน MacOS และ iOS ฉันประสบปัญหานี้เมื่อเร็ว ๆ นี้ ฉันต้องใช้โมเมนต์ js ที่นี่เพื่อแก้ไขปัญหา พูดถึงสิ่งที่ฉันทำในระยะสั้น ...

1. เพิ่มแพคเกจ momentjs npm ในโครงการของคุณ

2. ภายใต้ xyz.component.html (โปรดสังเกตว่า startDateTime เป็นสตริงประเภทข้อมูล)

{{ convertDateToString(objectName.startDateTime) }}

3. ภายใต้ xyz.component.ts

import * as moment from 'moment';

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

คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับไพพ์วันที่ได้ที่นี่เช่นรูปแบบ

ถ้าคุณต้องการที่จะใช้มันในองค์ประกอบของคุณคุณสามารถทำได้

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

ตอนนี้คุณสามารถใช้วิธีการแปลงซึ่งจะเป็น

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

คุณต้องส่งสตริงโลแคลเป็นอาร์กิวเมนต์ไปยัง DatePipe

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

ตัวเลือกรูปแบบที่กำหนดไว้ล่วงหน้า:

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

นอกจากนี้คุณยังสามารถใช้ช่วงเวลาสำหรับสิ่งต่าง ๆ เช่นนี้ Momentjsดีที่สุดในการแยกวิเคราะห์ตรวจสอบจัดการและแสดงวันที่ใน JavaScript

ฉันใช้ท่อนี้จาก Urish ซึ่งใช้งานได้ดีสำหรับฉัน:

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

ในพารามิเตอร์ args คุณสามารถใส่รูปแบบวันที่ของคุณเช่น: "dd / mm / yyyy"

ในกรณีของฉันฉันใช้ในไฟล์คอมโพเนนต์:

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

และในไฟล์ส่วนประกอบ HTML

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

มันใช้งานได้ดีสำหรับฉัน ;-)