Last updated: September 28, 2026 · Tested with Angular 22.2 (@angular/common) on Node 22
Short answer: the Angular date pipe is {{ value | date:'format':'timezone':'locale' }}. With no arguments it prints mediumDate (Sep 28, 2026). Use a preset such as 'short', 'medium' or 'fullDate' when you want locale-correct output, and a custom pattern such as 'dd/MM/yyyy HH:mm' when the format is fixed by your API or your users. The two mistakes that generate most of the questions about it are passing a non-ISO string (you get NG02311: Unable to convert "28/09/2026" into a date) and forgetting that the pipe converts to the browser's time zone unless you pass one.
This page is a tested reference: one fixed instant (2026-09-28T14:05:09.123Z) formatted with every preset, the useful custom symbols, five time zones and five locales, so you can look up what a pattern prints instead of guessing. It applies to Angular 22 and, since DatePipe has not changed its format grammar since Angular 5, to every version you are likely to be running.
How to Use the Date Pipe in an Angular Component
In a standalone component (the default since Angular 17), import the pipe and use it in the template:
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-order',
imports: [DatePipe],
template: `
<p>Placed: {{ placedAt | date }}</p>
<p>Placed: {{ placedAt | date:'medium' }}</p>
<p>Placed: {{ placedAt | date:'dd/MM/yyyy HH:mm' }}</p>
<p>Placed (UTC): {{ placedAt | date:'medium':'UTC' }}</p>
<p>Placed (de): {{ placedAt | date:'full':'':'de' }}</p>
`,
})
export class OrderComponent {
placedAt = new Date('2026-09-28T14:05:09.123Z');
}The value can be a Date, a number of milliseconds since the epoch, or an ISO 8601 string. The three arguments are all optional: format (a preset name or a custom pattern), timezone (an offset such as '+05:30' or the string 'UTC'), and locale (a locale code that you have registered). To skip the time zone but set the locale, pass an empty string for the time zone as in the last line above. If you still use NgModules, CommonModule brings the pipe in.
Angular Date Pipe Pre-defined Formats (Real Output)
All rows use the same instant, en-US, and time zone +05:30 so the numbers are comparable:
| Format | Pattern it expands to | Output |
|---|---|---|
'short' | M/d/yy, h:mm a | 9/28/26, 7:35 PM |
'medium' | MMM d, y, h:mm:ss a | Sep 28, 2026, 7:35:09 PM |
'long' | MMMM d, y, h:mm:ss a z | September 28, 2026, 7:35:09 PM GMT+5 |
'full' | EEEE, MMMM d, y, h:mm:ss a zzzz | Monday, September 28, 2026, 7:35:09 PM GMT+05:30 |
'shortDate' | M/d/yy | 9/28/26 |
'mediumDate' (default) | MMM d, y | Sep 28, 2026 |
'longDate' | MMMM d, y | September 28, 2026 |
'fullDate' | EEEE, MMMM d, y | Monday, September 28, 2026 |
'shortTime' | h:mm a | 7:35 PM |
'mediumTime' | h:mm:ss a | 7:35:09 PM |
'longTime' | h:mm:ss a z | 7:35:09 PM GMT+5 |
'fullTime' | h:mm:ss a zzzz | 7:35:09 PM GMT+05:30 |
Prefer the presets when the page is localized. 'shortDate' prints 9/28/26 for en-US but 28/09/2026 for en-GB and 28.09.26 for de, with no code change on your side.
Custom Date Format Patterns
When the format is fixed, build it from these symbols. Output is again for en-US and +05:30:
| Pattern | Output | Notes |
|---|---|---|
dd/MM/yyyy | 28/09/2026 | Two-digit day and month |
MM/dd/yyyy | 09/28/2026 | US order |
yyyy-MM-dd | 2026-09-28 | ISO date, safe for APIs and sorting |
d MMM y | 28 Sep 2026 | Single-digit day, short month |
EEEE, d MMMM y | Monday, 28 September 2026 | Full weekday and month |
EEE, MMM d | Mon, Sep 28 | Abbreviated names |
MMM yyyy | Sep 2026 | Month and year only |
HH:mm | 19:35 | 24-hour clock |
HH:mm:ss | 19:35:09 | |
h:mm a | 7:35 PM | 12-hour clock with AM/PM |
yyyy-MM-dd HH:mm:ss | 2026-09-28 19:35:09 | Log-file style |
yyyy-MM-ddTHH:mm:ss.SSSZ | 2026-09-28T19:35:09.123+0530 | SSS = milliseconds, Z = offset without colon |
ww | 40 | Week of year |
MMMMM | S | Narrow month, one letter |
The symbols you will actually use: y year, M month (MM two digits, MMM Sep, MMMM September), d day, E weekday (EEE Mon, EEEE Monday), H hour 0–23, h hour 1–12, m minute, s second, S fraction of a second, a AM/PM, w week of year, and the four time-zone symbols in the next section. Uppercase Y is the ISO week-numbering year, which differs from y around New Year, so use lowercase y unless you are printing week numbers.
Literal text goes in single quotes. "'Week' w 'of' yyyy" prints Week 40 of 2026, and "d 'de' MMMM 'de' y" with the fr locale prints 28 de septembre de 2026. Without the quotes, d and e would be interpreted as format symbols.
Time Zones: the Same Instant in Four Zones
By default the pipe converts to the browser's time zone, so two users on different continents see different times for the same order. Pass the third argument to pin it:
{{ placedAt | date:'medium':'UTC' }}
{{ placedAt | date:'medium':'+05:30' }}
{{ placedAt | date:'medium':'-07:00' }}UTC Sep 28, 2026, 2:05:09 PM
+05:30 Sep 28, 2026, 7:35:09 PM
-07:00 Sep 28, 2026, 7:05:09 AM
+01:00 Sep 28, 2026, 3:05:09 PMNote that Angular takes a fixed offset (or 'UTC', or 'GMT+2'), not an IANA zone name. When I passed 'Europe/Berlin' it did not throw: it was silently ignored and the output fell back to my machine's zone, which is the worst kind of bug. Daylight-saving changes are therefore your problem: either send the offset from the server with the value, or use Intl.DateTimeFormat with timeZone for zone names. The four zone symbols print the offset in different styles:
| Symbol | Output for +05:30 |
|---|---|
Z | +0530 |
ZZZZZ | +05:30 |
O | GMT+5 |
zzzz | GMT+05:30 |
Locales: Registering and Using Them
Only en-US is available out of the box. For anything else, register the locale data once at startup, then pass the locale as the pipe's third argument or set it app-wide with LOCALE_ID:
// main.ts (or app.config.ts)
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeEnGb from '@angular/common/locales/en-GB';
import { LOCALE_ID } from '@angular/core';
registerLocaleData(localeDe);
registerLocaleData(localeEnGb);
export const appConfig = {
providers: [{ provide: LOCALE_ID, useValue: 'en-GB' }],
};What 'full' and 'shortDate' print for the same instant in five locales:
en-US Monday, September 28, 2026, 7:35:09 PM GMT+05:30 9/28/26
en-GB Monday, 28 September 2026, 19:35:09 GMT+05:30 28/09/2026
en-IN Monday, 28 September 2026, 7:35:09 pm GMT+05:30 (same as en-GB)
de Montag, 28. September 2026, 19:35:09 GMT+05:30 28.09.26
fr lundi 28 septembre 2026, 19:35:09 GMT+05:30 28/09/2026Skipping registerLocaleData throws NG0701: Missing locale data for the locale "de" at runtime, not at build time, so test at least one page per locale.
Set the Default Format Once With DATE_PIPE_DEFAULT_OPTIONS
If every date in the app should look the same, do not repeat the format in 40 templates. Provide the default once:
import { DATE_PIPE_DEFAULT_OPTIONS } from '@angular/common';
export const appConfig = {
providers: [
{ provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { dateFormat: 'dd/MM/yyyy HH:mm', timezone: 'UTC' } },
],
};After that, a plain {{ placedAt | date }} prints 28/09/2026 14:05, and an explicit argument still overrides it where needed.
Using DatePipe in TypeScript (Not Only in Templates)
To format inside a class, for example when building a CSV or a filename, inject the pipe or call formatDate directly. formatDate needs no injection and is what the pipe uses internally:
import { formatDate } from '@angular/common';
const name = `orders-${formatDate(new Date(), 'yyyy-MM-dd', 'en-US')}.csv`;
// orders-2026-09-28.csvTo inject the pipe instead, add DatePipe to the component's providers and call this.datePipe.transform(value, 'medium'). The pipe's transform returns null for null, undefined and empty-string input, which is why templates do not crash on missing data.
Gotchas I Hit While Testing
NG02311: Unable to convert "28/09/2026" into a date. The pipe only parses ISO 8601 strings. A value indd/MM/yyyyfrom an API or a form throws this at render time. Parse it yourself into aDatefirst, or have the API return ISO strings.- A date-only ISO string is treated as local midnight.
'2026-09-28'printedSep 28, 2026, 12:00:00 AMon my machine (offset +05:30). The same string on a machine west of UTC can display as September 27. Include a time and zone, or format with the'UTC'argument. - The pipe follows the browser's zone by default. Screenshots in bug reports will not match your screen unless the zone is pinned. Pass
'UTC'or set it inDATE_PIPE_DEFAULT_OPTIONS. - Unsupported symbols are printed literally.
'Q'for quarter and'DDD'for day of year are valid in Java and .NET but not here: they came out asQandDDD. There is no quarter symbol in Angular'sDatePipe, so compute it asMath.ceil((month + 1) / 3). formatDate(null, ...)does not return null. The template pipe returnsnullfor a missing value, but the standalone function printedJan 1, 1970, 5:30:00 AM, the epoch in my zone. Guard the call.- Numeric strings are parsed as milliseconds.
'1790000000000'formatted fine asSep 21, 2026, which is convenient until an ID field ends up in a date column. - IANA zone names are ignored, not rejected.
date:'medium':'Europe/Berlin'renders in the browser's zone with no error. Only offsets,'UTC'and'GMT+n'work. 'B'(day period) needs extra locale data. PlainenthrewNG02303for it. Stick to'a'for AM/PM.
FAQ
How do I format a date as dd/MM/yyyy in Angular? {{ value | date:'dd/MM/yyyy' }}. For the locale's own short form instead, use 'shortDate' with a registered locale.
How do I show the time in 24-hour format? Use HH instead of h: {{ value | date:'HH:mm' }} prints 19:35.
How do I display a date in UTC? Pass the time zone as the second argument: {{ value | date:'medium':'UTC' }}.
Why does the date pipe show yesterday's date? Because a date-only string is parsed as local midnight, and the browser's zone is behind UTC. Send full ISO timestamps and format with an explicit zone.
Can I use the date pipe in a component class? Yes. Inject DatePipe via providers and call transform, or call formatDate from @angular/common directly.
What is the default format of the Angular date pipe? 'mediumDate', for example Sep 28, 2026, unless you change it through DATE_PIPE_DEFAULT_OPTIONS.
Related Angular Guides
- Angular 404 error on page refresh after deployment
- How to use AuthGuard in Angular
- Angular CRUD with an ASP.NET Core Web API
- Angular form validation
Official references: DatePipe API · formatDate · Formatting data based on locale
Comments
Post a Comment