Tôi đang sử dụng dateđường ống để định dạng ngày của mình, nhưng tôi không thể có được định dạng chính xác mà tôi muốn mà không có cách giải quyết. Tôi hiểu sai về đường ống hay chỉ là không thể?

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

xem plnkr

Lỗi định dạng ngày ống được sửa trong Angular 2.0.0-rc.2, Yêu cầu kéo này .

Bây giờ chúng ta có thể làm theo cách thông thường:

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

Ví dụ:

Phiên bản hiện tại:

Example Angular 8.x.x

Phiên bản cũ:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

Thêm thông tin trong tài liệu DatePipe

Nhập DatePipe từ góc / chung và sau đó sử dụng mã dưới đây:

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

nơi userdate sẽ là chuỗi ngày của bạn. Xem nếu điều này giúp.

Ghi chú chữ thường cho ngày và năm:

d- date
M- month
y-year

BIÊN TẬP

Bạn phải truyền localechuỗi dưới dạng đối số cho DatePipe, ở góc mới nhất. Tôi đã thử nghiệm ở góc 4.x

Ví dụ:

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

Bạn có thể đạt được điều này bằng cách sử dụng một đường ống tùy chỉnh đơn giản.

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

Ưu điểm của việc sử dụng một đường ống tùy chỉnh là, nếu bạn muốn cập nhật định dạng ngày trong tương lai, bạn có thể đi và cập nhật đường ống tùy chỉnh của mình và nó sẽ phản ánh mọi nơi.

Ví dụ ống tùy chỉnh

Tôi luôn sử dụng Moment.js khi tôi cần sử dụng ngày vì bất kỳ lý do gì.

Thử cái này:

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

   }
}

Và theo quan điểm:

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

Tôi đang sử dụng Giải pháp tạm thời này:

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

Nếu bất cứ ai tìm kiếm với thời gian và múi giờ, đây là dành cho bạn

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

thêm z cho múi giờ ở cuối ngày và định dạng thời gian

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

Góc: 8.2.11

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

Đầu ra: ngày 9 tháng 6 năm 1973

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

Đầu ra: 09/06/1973

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

Đầu ra: 09/06/1973 12:00 AM

Điều duy nhất làm việc cho tôi được lấy cảm hứng từ đây: https://stackoverflow.com/a/35527407/2310544

Đối với dd / MM / yyyy thuần túy, điều này hiệu quả với tôi, với góc 2 beta 16:

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

Nếu bất cứ ai cũng có thể tìm cách hiển thị ngày theo thời gian trong AM hoặc PM ở góc 6 thì đây là dành cho bạn.

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

Đầu ra

Tùy chọn định dạng được xác định trước

Ví dụ được đưa ra tại địa phương en-US.

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

liên kết tham khảo

Tôi nghĩ rằng đó là vì miền địa phương được mã hóa cứng vào DatePipe. Xem liên kết này:

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

Và không có cách nào để cập nhật miền địa phương này bằng cấu hình ngay bây giờ.

Các ống ngày không hoạt động chính xác trong Angular 2 với trình duyệt Typecript cho Safari trên MacOS và iOS. Tôi phải đối mặt với vấn đề này gần đây. Tôi đã phải sử dụng khoảnh khắc js ở đây để giải quyết vấn đề. Đề cập đến những gì tôi đã làm trong thời gian ngắn ...

1. Thêm gói nj giâyjs trong dự án của bạn.

2. Trong xyz.component.html, (Lưu ý ở đây rằng startDateTime là chuỗi kiểu dữ liệu)

{{ convertDateToString(objectName.startDateTime) }}

3. Theo xyz.component.ts,

import * as moment from 'moment';

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

Bạn có thể tìm thêm thông tin về đường ống ngày ở đây , chẳng hạn như các định dạng.

Nếu bạn muốn sử dụng nó trong thành phần của mình, bạn chỉ cần làm

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

Bây giờ, bạn có thể chỉ cần sử dụng phương thức biến đổi của nó, sẽ là

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

Bạn phải truyền chuỗi miền địa phương làm đối số cho DatePipe.

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

Tùy chọn định dạng được xác định trước:

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

thêm datepipe trong 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 { }

Bạn cũng có thể sử dụng khoảnh khắc cho những thứ này. Momentjs là tốt nhất để phân tích, xác thực, thao tác và hiển thị ngày trong JavaScript.

Tôi đã sử dụng đường ống này từ Urish, hoạt động tốt với tôi:

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

Trong tham số args, bạn có thể đặt định dạng ngày của mình như: "dd / mm / yyyy"

Trong trường hợp của tôi, tôi sử dụng trong tập tin thành phần:

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

Và trong tệp HTML thành phần

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

Việc này ổn với tôi ;-)