Как отформатировать дату как dd/MM/yyyy в Angular 2 используя трубы?

Question

Я использую дату, чтобы отформатировать дату, но я просто не могу получить точный формат, который я хочу, без обходного пути. Я понимаю каналы неправильно или просто невозможно?

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

Answer 1

Pipe формат даты ошибка фиксируется в угловых 2.0.0-РК-2, this Pull Request.

Теперь мы можем сделать обычным способом:

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

---

Примеры:

Текущая версия:

Plunker Angular 5.2.x

---

Следующая версия:

Plunker Angular 6.0.x

---

Старые версии:

Plunker Angular 2.x

Plunker Angular 4.x

---

More info in documentation DatePipe

Answer 2

Я думаю, что это потому, что локаль жёстко в DatePipe. Смотрите эту ссылку:

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

И нет никакого способа, чтобы обновить эту локаль по конфигурации прямо сейчас.

Answer 3

Я использую это временное решение:

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

Answer 4

Единственное, что работал для меня был вдохновлен здесь: https://stackoverflow.com/a/35527407/2310544

Для чистого дд/мм/гггг, это работает для меня, с угловое 2 бета-16:

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

Answer 5

Импорт DatePipe из углового/общего и затем использовать код ниже:

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

где userdate будет ваша строка даты. Посмотрите, поможет ли это.

Запомните строчной на дату и год:

d- date 
M- month 
y-year 

Answer 6

Вы также можете использовать momentjs для такого рода вещей. Momentjs лучше всего разбирать, проверять, манипулировать и отображать даты в JavaScript.

Я использовал эту трубу от Urish, который отлично работает для меня:

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

В аргументах параметр, который вы можете поместить свой формат даты, как: "дд/мм/гггг"

Answer 7

I всегда используйте 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> 

Answer 8

Вы можете добиться этого с помощью с помощью простого пользовательского трубы.

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

Преимущество использования пользовательских труб является то, что, если вы хотите обновить формат даты в будущем, вы можете пойти и обновить пользовательские трубы, и она будет отражать повсюду.

Custom Pipe examples