有没有办法使用 Angular 管道获取格式化的日期输出

Question

我有一个类似于 '2020-01-15T10:45:20+02:30[US/Denver]' 的 ISO 区域日期时间字符串。我正在尝试获得一个 angular 管道，使它看起来像 '15 Jan 2020 ( US/Denver )'。执行此操作的最佳方法是什么。

目前我没有合适的管道实现，这就是我实现预期输出的方式

{{ dateInput | date:"dd-MMM-yyyy" }}{{ someFuntionThatReturnsTimeZoneWithStringManipulation() }}

提前致谢

Answer 1

您可以扩展默认日期管道、拆分字符串、转换日期并return返回组合字符串。

这是一个快速实现

管道

import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'dateLocation',
  pure: true
})
export class DateLocationPipe extends DatePipe implements PipeTransform {
  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale);
  }

  transform(value: any, format?: string, timezone?: string, locale?: string): any {
    const date = value.split('[');
    return super.transform(date[0], format, timezone, locale) + ' (' + date[1].replace(/\]/g, ')');
  }
}

组件模板

{{ dateInput | dateLocation:"dd MMM yyyy" }}

工作示例：Stackblitz

更新：忽略 UTC 时间偏移

你可以在 + 符号上再执行一个 split 并忽略时间戳的时间偏移。

管道

return super.transform(
    date[0].split('+')[0], 
    format, 
    timezone, 
    locale
  ) + 
  ' (' + 
  date[1].replace(/\]/g, ')');

工作示例：Stackblitz

有没有办法使用 Angular 管道获取格式化的日期输出

Is there a way to get the formatted date output with Angular Pipes

javascript

date-formatting

angular

更新：忽略 UTC 时间偏移