没有任何自定义管道

Question

如何在HTML模板中格式化日期？它目前显示此

/日期（1524210579389）

Answer 1

您必须创建一个自定义管道，以/Date(xxxxxxxxxxxxx)/格式将日期格式化为带有时区的json日期对象。然后，您可以使用内置的DatePipe角度来获取所需的格式而不分割日期。

通常，这种类型的格式由.NET MVC json序列化程序返回，同时在JSON中序列化DateTime值。 WEB API 2中不存在此问题，因为当我们返回http响应时，web api使用JSON.NET来序列化DateTime。

自定义日期管道代码

定制date.pipes.ts

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Formats a /Date(xxxxxxxxxxxxx)/ into a JSON Date object
 * Takes an argument as input of actual date value in /Date(xxxxxxxxxxxxx)/ format.
 * Usage:
 *   date-value | customDateFormat
 * Example:
 *   {{ '/Date(1402034400000)/' | customDateFormat}}
*/
@Pipe({name: 'customDateFormat'}  )
export class CustomDateFormat implements PipeTransform {
  transform(value: any): Date {
       var customDate = new Date(value.match(/\d+/)[0] * 1);  
       return  customDate;
  }
}

组件代码
app.component.ts

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  originalDate:string = '/Date(1524210579389)/';
}

HTML模板中的用法

app.component.html

<p>Original date: {{originalDate}}</p> <br>
<p>Custom date: {{originalDate | customDateFormat|date :'short'}}

这里我使用内置date :'short'管道来重新格式化结果。

这是最终输出

Custom date: 4/20/18, 1:19 PM

工作演示：https://stackblitz.com/edit/angular-custom-pipes-wiwnew

Answer 2

没有任何自定义管道

只需从像这样的角度调用date管道

{{getDate("/Date(1524210579389)") | date}}

getDate(value) {
    return value.match(/\d+/)[0] * 1
  }

Working example

如果需要更改格式，可以选择

选项

https://angular.io/api/common/DatePipe

Answer 3

默认情况下，由角度

提供管道

例如：

<div>
  <h2> {{binded_date | date: 'MMMM yyyy' }}</h2>
</div>

输出： 2018年4月

你可以在角度datepipes

上找到更多这样的例子

如何格式化/日期（1524210579389）在Angular中

3 个答案:

没有任何自定义管道