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

Question

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

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

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

提前致谢

Answer 1

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

这是一个快速实现

管道

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