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

我正在使用日期管道来格式化我的日期，但如果没有解决方案，我就无法得到我想要的确切格式。我理解管道是错误的还是不可能的?

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

当前回答

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

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

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

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

2018-06-13 07:22:11

其他回答

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

01.07.2022(在德国很常见)

你可以简单地这样做:

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

2022-07-14 15:19:29

您可以使用一个简单的自定义管道来实现这一点。

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

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

自定义管道示例

2017-04-04 14:07:16

从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');

2016-06-16 12:40:02

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

这个错误让我震惊。

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

2022-08-29 07:36:12

在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");
}

2018-04-07 18:29:12

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

推荐文章

最新文章

标签