Include text in Angular 2+ Date Pipe format

Question

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 1

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'}}

Answer 2

May be you can create a simple pipe,

@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