Как отформатировать дату как dd / MM / yyyy в Angular 2 с помощью труб?
Я использую date pipe для форматирования даты, но я просто не могу получить точный формат, который я хочу, без обходного пути. Я понимаю каналы неправильно или просто невозможно?
//our root app component import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], template: ` Hello {{name}}
{{date | date: 'ddMMyyyy'}}, should be {{date | date: 'dd'}}/{{date | date:'MM'}}/{{date | date: 'yyyy'}}
`, directives: [] }) export class App { constructor() { this.name = 'Angular2' this.date = new Date(); } } Изображение plnkr
- Настройка переменных динамической области в AngularJs - область.
- Возможна ли уклон 2 объекта через параметры маршрута?
- Угловая форма 2 для проверки пароля повторения
- Угловой 4 - «Нельзя привязываться к« ngModel », так как это не известное свойство ошибки« input »
- Angular2: приложение аварийно завершает работу / становится невосприимчивым после обнаружения исключения / ошибки
- Угловое redirect на страницу входа в систему
- Хранение экземпляра инжектора для использования в компонентах
- Нельзя привязываться к 'ng-forOf', поскольку это не известное свойство
- Angular 2 - просмотр не обновляется после изменения модели
- Как использовать * ngIf else в Angular?
- Angular2: как связывать для выбора нескольких
- Как повторить fragment HTML несколько раз без ngFor и без другого @Component
- угловое обнаружение изменений и ChangeDetectionStrategy.OnPush
Ошибка формата даты в канале, установленная в Angular 2.0.0-rc.2, этот запрос Pull .
Теперь мы можем сделать обычный путь:
{{valueDate | date: 'dd/MM/yyyy'}}
Примеры:
Текущая версия:
Plunker Angular 6.xx
Старые версии:
Plunker Angular 2.x
Plunker Angular 4.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 }}
Преимущество использования настраиваемой трубы заключается в том, что если вы хотите в будущем обновить формат даты, вы можете перейти и обновить свой собственный канал, и он будет отражать все где угодно.
Примеры пользовательских труб
Я всегда использую 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') } }
И в перспективе:
{{ date | formatDate }}
Я использую это временное решение:
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 это сработало для меня, с угловым 2-бета-16:
{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
Я думаю, что это потому, что локаль жестко закодирована в DatePipe . См. Эту ссылку:
И сейчас нет возможности обновить эту локаль путем настройки.
Вы можете также использовать momentjs для такого рода вещей. Momentjs лучше всего разбирать, проверять, манипулировать и отображать даты в JavaScript.
Я использовал эту трубку у Urish, которая отлично подходит для меня:
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 с браузером Typcript для браузера Safari на MacOS и iOS. Недавно я столкнулся с этой проблемой. Мне пришлось использовать момент js здесь для решения проблемы.
Здесь вы можете найти более подробную информацию о дате, например, форматах.
Если вы хотите использовать его в своем компоненте, вы можете просто сделать
pipe = new DatePipe('en-US'); // Use your own locale
Теперь вы можете просто использовать свой метод преобразования, который будет
const now = Date.now(); const myFormattedDate = this.pipe.transform(now, 'short');