包含 Angular 2+ 日期管道格式的文本答案

【问题标题】：Include text in Angular 2+ Date Pipe format包含 Angular 2+ 日期管道格式的文本
【发布时间】：2023-03-15 22:20:02
【问题描述】：

我正在尝试在 Angular 2 中使用 DatePipe。我希望输出日期的格式为：08/23/2017 at 11:07 AM。

但是，我想不出在我的日期格式中包含文本 at 的正确方法。

当我指定格式时：{{my_date | date:'MM/dd/yyyy at hh:mm a'}}

我得到：08/23/2017 AMt 11:07 AM。

我尝试用引号将文本括起来：{{my_date | date:'MM/dd/yyyy "at" hh:mm a'}}

但这只是在输出中添加了引号：08/23/2017 "AMt" 11:07 AM。

这样做的唯一方法是将其分成两个单独的管道，格式的两侧像{{my_date | date: 'MM/dd/yyyy}} at {{my_date | date: 'hh:mm a'}}？

或者有没有办法将at 中的a 转义，以便显示文本at 而不是AMt？

【问题讨论】：

标签： angular pipe date-pipe

【解决方案1】：

我有这种确切的情况。我可以通过用\'包围文字来让它工作

{{my_date | date: 'yyyy/MM/dd \'at\' HH:mm:ss'}}

【讨论】：

对于使用双引号的（比如我），加\"at\"是不行的，但是你可以加myFormat = "dd/MM/yyyy 'at' HH:mm"

【解决方案2】：

也许你可以创建一个简单的管道，

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'MMM-dd-yyyy') + ' at ' + datePipe.transform(value, 'hh:mm a');
        return value;
    }

}

<p>{{currentTime | dateFormatPipe}}</p>

Ref1 , Ref2

【讨论】：