Angular DatePipe格式化问题：如何输出指定日期时间格式

Got it, I know exactly what's going on here! The issue is that Angular's DatePipe treats certain letters in the format string as special placeholders—like a which stands for AM/PM. When you wrote 'dd MMM, y. at h:mm a', the a in "at" got interpreted as that AM/PM placeholder instead of plain text, which caused the weird output you saw.

Here are two solid solutions to get the exact format you want (19 Jan 2023. at 14:15):

1. Wrap Plain Text in Single Quotes #

You can tell DatePipe to treat specific parts as literal text by wrapping them in single quotes. Just adjust your format string like this:

{{order.updatedAt | date: 'dd MMM, y. \'at\' HH:mm'}}

(Note: I switched to HH:mm here since your example uses 24-hour time; if you still want 12-hour with AM/PM, keep h:mm a instead.)

If you prefer using double quotes for the format string, you can use unescaped single quotes inside:

{{order.updatedAt | date: "dd MMM, y. 'at' HH:mm"}}

This will output the "at" as plain text without messing up the date formatting.

2. Split the Date and Text Separately #

Another straightforward approach is to split the formatted date and the fixed "at" text into separate parts, then concatenate them:

{{order.updatedAt | date: 'dd MMM, y.'}} at {{order.updatedAt | date: 'HH:mm'}}

This avoids any conflicts with format placeholders entirely, since you're handling the date segments independently from the static text.

Either of these methods will give you the exact date-time format you're looking for!

内容的提问来源于stack exchange，提问作者snowgroomer