Angular 日期格式在时间之前添加 'at'

Question

有没有简单的方法可以在我的日期和时间之间添加 'at' 这个词，所以它看起来像这样：2015 年 1 月 20 日 11:49 上午，而不是 2015 年 1 月 20 日，11:49上午。我尝试了 long 和 full，但我不想显示秒数和区域设置。

    2015-01-20 16:49:07+00:00

{{ myDate | date : 'medium' }}

Answer 1

您可以通过添加新的 Custom Pipe 或在组件中处理 DatePipe (Angular built-in)

附上一张Stackblitz Demo供大家参考

方法 #1 - 自定义管道

@Pipe({
  name: 'dateAtInsert'
})
export class DateAtInsertPipe implements PipeTransform {

  transform(value: string) {
    return value
      .replace(/,\s(?=\d+:)/g, ' ')
      .split(/\s(?=\d+:)/g)
      .join(' at ');
  }

}

{{ today | date : dateFormat | datAtInsert }}       // Dec 8, 2020 at 8:26 AM

方法 #2 - 组件中的日期管道

const today = new Date();
const transformDate = this.datePipe.transform(today, this.dateFormat);

this.formattedDate = transformDate
   .replace(/,\s(?=\d+:)/g, ' ')
   .split(/\s(?=\d+:)/g)
   .join(' at ');

<h1>{{ formattedDate }}<h1>             // Dec 8, 2020 at 8:26 AM

方法 #3 - 在日期格式中添加 at（组件中的 DatePipe）

dateFormat: string = 'MMM d, y AT h:mm a';        // Need to use an uppercase AT since lowercase "a" is reserved with AM/PM in date formats
                                                  // While capital "A" and "T" doesn't hold any value in date formats so it's safe to use


const transformDate = this.datePipe.transform(this.today, this.dateFormat);

this.formattedDate = transformDate.replace('AT', 'at');

方法 #4 - 在日期格式中添加 at（HTML 中的 DatePipe）

模板

{{ insertDateAt(today | date: 'MMM d, y AT h:mm a') }}

组件

insertDateAt(date: string): string {
  return date.replace('AT', 'at');
}

注意：

如果您希望时间采用这样的格式 11:49 AM 避免使用 medium，因为它包括秒，例如 11:49:29 AM
改用自定义格式，在我们的例子中我们使用 MMM d, y, h:mm a 或者您可以在 Angular's DatePipe Documentation

Angular 日期格式在时间之前添加 'at'

Angular Date Formatting add the 'at' before time

date

angular-date-format

angular