我认为这是因为区域设置硬编码到DatePipe中。请看这个链接:

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

现在没有办法通过配置来更新这个区域设置。

我正在使用这个临时解决方案:

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

从angular/common中导入DatePipe，然后使用下面的代码:

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

在哪里 userdate 将是您的日期字符串。 看看这是否有帮助。

注意小写的日期和年份:

d - date
M - month
y - year

EDIT

你必须将locale string作为参数传递给DatePipe，在latest angular中。我已经在angular 4.x中进行了测试

例如:

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

在Angular 2.0.0-rc中修复了管道日期格式的错误。2，这个Pull Request。

现在我们可以用传统的方法:

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

例子:

当前版本:

Angular 13示例

旧版本:

示例:Angular 8.x.x

Angular 7.x示例

示例Angular 6.x

Angular 4.x

Angular 2.x示例

更多信息请参阅DatePipe文档

你也可以使用momentjs来做这类事情。Momentjs最擅长用JavaScript解析、验证、操作和显示日期。

我使用了Urish的这个管道，它对我来说很好:

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

在args参数中，你可以输入日期格式，如:"dd/mm/yyyy"

更新:

鉴于Moment.js已弃用，这个答案不再有效。目前，当我必须格式化一些日期，根据任务，我使用Javascript date或date-fns是一个很好的替代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 '@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 }}

使用自定义管道的好处是，如果你想在将来更新日期格式，你可以去更新你的自定义管道，它会反映每个地方。

自定义管道示例

在MacOS和iOS上，使用Typescript for Safari浏览器的Angular 2中，日期管道行为不正确。我最近遇到了这个问题。我不得不在这里使用moment js来解决这个问题。简而言之，我所做的…

在项目中添加momentjs npm包。 在xyz.component.html下面，(注意startDateTime是数据类型字符串)

(转换名称)

xyz.component.ts下,

Import * as moment from 'moment';

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

如果有人在看时间和时区，这是给你的

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

在日期和时间格式的末尾添加z表示时区

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

您可以在这里找到有关日期管道的更多信息，例如格式。

如果您想在组件中使用它，可以简单地这样做

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

现在，你可以简单地使用它的变换方法

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

如果有人希望在angular 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).

参考链接

在我的例子中，我在组件文件中使用:

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>

这对我来说很好;-)

角:8.2.11

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

1973年6月9日

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

输出:09/06/1973

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

输出:09/06/1973上午12: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).

在app.component.module.ts中添加datepipe

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

这对一些人来说可能很明显，但如果你想要这种日期格式

01.07.2022(在德国很常见)

你可以简单地这样做:

{{ myDate | date: "dd.MM.yyyy" }}

在我的例子中，我使用的是格式为dd/MM/yyyy的日期字符串，并试图将其转换为不同的格式。

这个错误让我震惊。

在谷歌搜索之后，我发现日期字符串应该是iso认可的格式。