Include text in Angular 2+ Date Pipe format

Andrew Mairose picture Andrew Mairose · Aug 23, 2017 · Viewed 7.9k times · Source

I am attempting to use the DatePipe in Angular 2. I want the output date to be in the format: 08/23/2017 at 11:07 AM.

However, I can't figure out the proper way to include the text at in my date format.

When I specify the format as such: {{my_date | date:'MM/dd/yyyy at hh:mm a'}}

I get: 08/23/2017 AMt 11:07 AM.

I tried surrounding the text in quotes: {{my_date | date:'MM/dd/yyyy "at" hh:mm a'}}

But that just added the quotes to the output: 08/23/2017 "AMt" 11:07 AM.

Is the only way to do this to break it up into two separate pipes with the two sides of the format like {{my_date | date: 'MM/dd/yyyy}} at {{my_date | date: 'hh:mm a'}}?

Or is there a way to escape the a in at so that it will display the text at instead of AMt?

Answer

cooljeffro picture cooljeffro · Nov 19, 2017

I had this exact situation. I was able to get it to work by surrounding the literal text with \'

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