Ошибка формата даты конвейера исправлена ​​в Angular 2.0.0-rc.2, этом запросе на слияние.

Теперь можно поступить обычным способом:

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

Примеры:

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

Пример Angular 8.xx < / а>

Пример Angular 7.x < / а>

Пример Angular 6.x < / а>

Пример Angular 4.x

Пример Angular 2.x

Дополнительная информация в документации DatePipe

Импортируйте DatePipe из angular / common, а затем используйте следующий код:

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

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

Обратите внимание на строчные буквы для даты и года:

d- date
M- month
y-year

ИЗМЕНИТЬ

Вы должны передать строку locale в качестве аргумента 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 }}

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

Примеры пользовательских каналов

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

Вывод: 06.09.1973

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

Вывод: 06.09.1973, 12:00.

Если кто-то может отображать дату со временем в AM или PM в угловом 6, то это для вас.

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

Вывод

Стандартные параметры формата

Примеры приведены в локали 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).

Ссылка на ссылку

Вы должны передать строку языкового стандарта в качестве аргумента 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 { }

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

Для чистого dd / MM / yyyy это сработало для меня с angular 2 beta 16:

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

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

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

И сейчас нет возможности обновить эту локаль с помощью конфигурации.

Дополнительную информацию о канале даты, например о форматах, можно найти здесь.

Если вы хотите использовать его в своем компоненте, вы можете просто сделать

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

Теперь вы можете просто использовать его метод преобразования, который будет

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

Каналы дат некорректно работают в 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");
}

В моем случае я использую в файле компонента:

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>

Он отлично работает для меня ;-)

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

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

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

В параметре args вы можете указать формат даты, например: «дд / мм / гггг».