- Published on
Angular ISO Date Pipe
- Authors
- Name
- Kevin Schuchard
- @KevinSchuchard
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:
04:24:30.893Z
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