Как форматировать дату как dd/MM / yyyy в Angular 2 с помощью труб?
Я использую канал даты для форматирования даты, но я просто не могу получить точный формат, который я хочу без обходного пути. Я неправильно понимаю трубы или это просто невозможно?
//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();
}
}
12 ответов
ошибка формата даты трубы исправлена в Angular 2.0.0-rc.2, этот запрос тянуть.
теперь мы можем сделать обычным способом:
{{valueDate | date: 'dd/MM/yyyy'}}
примеры:
Текущая Версия:
Старые Версии:
импортируйте DatePipe из angular / common, а затем используйте приведенный ниже код:
var datePipe = new DatePipe();
this.setDob = datePipe.transform(userdate, 'dd/MM/yyyy');
где userdate будет ваша строка даты. Посмотрим, поможет ли это.
обратите внимание на нижний регистр для даты и года:
d- date
M- month
y-year
редактировать
вы должны пройти locale
string в качестве аргумента для DatePipe, в последнем angular. Я тестировал в angular 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 }}
преимущество использования пользовательского канала заключается в том, что, если вы хотите обновить формат даты в будущем, вы можете пойти и обновить свой пользовательский канал, и он будет отражать каждый где.
Я всегда использую момент.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');
}
}
}
единственное, что сработало для меня, было вдохновлено отсюда: https://stackoverflow.com/a/35527407/2310544
для чистого dd / MM / yyyy, это сработало для меня, с angular 2 beta 16:
{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
Я думаю, что это потому, что язык зашит в DatePipe
. См. эту ссылку:
и нет никакого способа обновить эту локаль по конфигурации прямо сейчас.
вы также можете использовать momentjs для такого рода вещи. Momentjs лучше всего разбирать, проверять, манипулировать и отображать даты в JavaScript.
Я использовал эту трубу из Юриша, которая отлично работает для меня:
https://github.com/urish/angular2-moment/blob/master/src/DateFormatPipe.ts
в параметре args вы можете поместить свой формат даты, например:"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'}}
каналы даты ведут себя неправильно в Angular 2 с помощью Typescript для браузера Safari на MacOS и iOS. Я столкнулся с этим вопросом недавно. Я должен был использовать момент js здесь для решения проблемы.
Вы можете найти более подробную информацию о дате труба здесь, например форматы.
Если вы хотите использовать его в своем компоненте, вы можете просто сделать
pipe = new DatePipe('en-US'); // Use your own locale
теперь вы можете просто использовать его метод преобразования, который будет
const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');
Если кто-то может смотреть, чтобы отобразить дату со временем в AM или PM в angular 6, то это для вас.
{{date | date: 'dd/MM/yyyy hh:mm a'}}
выход
предварительно определенные параметры формата
примеры приведены в En-US locale.
'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).