角度日期格式在时间之前添加"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)

已附上Stacklitz演示供您参考

方法#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-在日期格式(HTML中的DatePipe(中添加at

模板

{{ 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的DatePipe文档中找到更多格式