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?

cooljeffro · Accepted Answer · 2017-11-19 08:10:41Z

49

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

answered Nov 19, 2017 at 8:10

cooljeffro

6767 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sampgun Over a year ago

For the ones using double quotes (like me), it won't work by adding \"at\", but you will be able to do myFormat = "dd/MM/yyyy 'at' HH:mm"

Prashobh · Accepted Answer · 2017-10-13 12:47:27Z

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

answered Oct 13, 2017 at 12:47

Prashobh

9,58415 gold badges66 silver badges92 bronze badges

Collectives™ on Stack Overflow

Include text in Angular 2+ Date Pipe format

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related