Angular ISO Date Pipe

The Angular Date pipe can do more than format local time. You can also work with any offset, such as zero UTC offset.

Angular Date Pipe

The Angular Date pipe is fantastic at formatting the majority of date-time manipulations. For example when you provide a date-time string to the date pipe it translates it to a more human readable format

const today = new Date(); # Mon Dec 16 2019 21:24:30 GMT-0700 (Mountain Standard Time)
{{today | date}} # Dec 16, 2019

Formatting the date-time is available in a number of ways, such as the pre-defined formats or your own custom ones.

{{today | date:'medium'}} # Dec 16, 2019, 9:24:30 PM

For most, this is exactly what you want, the date and local time of the user. But what if you’re dealing with ISO date-time strings that are zero UTC offset. The previous example is not displaying a zero offset time. That time would be:


The Angular Date pipe defaults to local time. Fortunately, this is easily adjusted by providing the offset to the pipe as the 2nd argument: '+0:00'.

{{ today | date:'HH:mm:ss':'+0:00' }}

# 04:24:30

You can achieve a simplified extended ISO format (ISO 8601) similar to .toISOString() with following date pipe format:

{{ today | date:'yyyy-MM-ddTHH:mm:ss.SSS':'+0:00' }}Z

# 2020-05-07T04:24:30.576Z