示例：

Question

我使用date管道格式化我的日期，但我无法获得我想要的确切格式而无需解决方法。我是错误地理解管道还是不可能？

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

管道日期格式错误已在Angular 2.0.0-rc.2，this Pull Request中修复。

现在我们可以采用传统方式：

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

示例：

当前版本：

Example Angular 7.x.x

旧版本：

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

More info in documentation DatePipe

Answer 2

从angular / common导入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');

Answer 3

您可以通过简单的自定义管道来实现此目的。

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

Answer 4

当我因任何原因需要使用日期时，我总是使用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 5

我正在使用此临时解决方案：

if (isset($_SERVER['HTTPS']) || $_SERVER['SERVER_PORT'] == 443) {   
       $url = 'https://';
       define('HOSTNAME', $url . $_SERVER['SERVER_NAME'] . ':' . $_SERVER['SERVER_PORT']);}

else {
       $url = 'http://';
       define('HOSTNAME', $url . 'test-svr');
}

define('APP_HOST', HOSTNAME . '/app/');

Answer 6

我认为这是因为语言环境被硬编码到DatePipe中。看到这个链接：

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

目前无法通过配置更新此区域设置。

Answer 7

对我来说唯一有用的东西来自于此： https://stackoverflow.com/a/35527407/2310544

对于纯dd / MM / yyyy，这对我有用，角度为2 beta 16：

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

Answer 8

在Angular 2中，日期管道在MacOS和iOS上的Safari浏览器的Typescript中表现不正常。我最近遇到了这个问题。我不得不在这里使用时刻j来解决问题。提到我所做的一切......

在项目中添加momentjs npm包。
在xyz.component.html下，（请注意，startDateTime的数据类型为字符串）

curl -X PUT -H "Content-Type: application/json" -d '{ “Owner”: { "id" : "root" } }' -H 'Authorization: token XXX_Token_XXX' 'http://XXX_RT_URL_XXX/REST/2.0/ticket/6'

在xyz.component.ts下，

{{ convertDateToString(objectName.startDateTime) }}

import * as moment from 'moment';

Answer 9

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

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

在日期和时间格式结束时为时区添加z

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

Answer 10

您也可以将momentjs用于此类事情。 Momentjs最适合在JavaScript中解析，验证，操作和显示日期。

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

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

在args参数中，您可以将日期格式设置为：“dd / mm / yyyy”

Answer 11

如果有人希望用角度6以AM或PM显示带有时间的日期，那么这是给您的。

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

输出

预定义格式选项

示例在美国语言环境中提供。

'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).

Reference Link

Answer 12

角度：8.2.11

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

输出：1973年6月9日

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

输出： 1973年9月6日

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

输出： 1973年9月6日上午12:00

Answer 13

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

如果要在组件中使用它，只需执行

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

现在，您只需使用其转换方法即可，

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

Answer 14

您必须将语言环境字符串作为参数传递给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中添加日期管道

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

您能看到：how to date format use datepipe in angular

Answer 15

在我的情况下，我在组件文件中使用：

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>

对我来说很好;-）

使用管道格式化日期为dd / MM / yyyy

15 个答案:

示例：