Angular Date Pipe Format Tester

Angular Date Pipe Format Examples

The date pipe takes up to three arguments: {{ value | date: format : timezone : locale }}. These outputs are for 12 October 2026 at 1:05 PM in India (UTC+5:30) with the default en-US locale.

How to Use the Tester

1. Pick a locale. The tester loads the same locale data your app registers from @angular/common/locales.
2. Enter a value and a format, or select a named format, a common pattern, or any token in the table to build one.
3. Add a timezone if your app passes one. The tester warns when Angular would ignore it.
4. Copy the code for the template or for formatDate() in TypeScript, plus the registerLocaleData call for non-default locales.
5. Switch tabs to test the number, currency and percent pipes with the same locale.

Frequently Asked Questions

How do I format a date as dd/MM/yyyy in Angular?

Use {{ value | date: 'dd/MM/yyyy' }}. dd is the zero-padded day, MM the zero-padded month (lowercase mm is minutes), and yyyy the four-digit year. The same pattern works in TypeScript with formatDate(value, 'dd/MM/yyyy', 'en-US').

What is the default format of the date pipe?

mediumDate, which is 'MMM d, y' in en-US (Oct 12, 2026). You can change the default for the whole app by providing DATE_PIPE_DEFAULT_OPTIONS with a dateFormat, and a default timezone with its timezone option.

Why does my date show the wrong day or time?

The pipe formats in the browser's time zone unless you pass a timezone. A date-only string like '2026-10-12' is read as local midnight, while an ISO string ending in Z is UTC, so the same value can land on a different day for users in other zones. Pass a timezone such as 'UTC' or '+0530' to pin it.

Can I pass an IANA time zone like America/New_York?

No. The timezone parameter only takes offsets such as '+0530' and '-08:00', or UTC and GMT (some browsers also accept US abbreviations like EST). Anything else is silently ignored and the browser's time zone is used, so the tester warns when that happens. For named zones, convert the date first, for example with Intl.DateTimeFormat.

What is the difference between y and Y, or d and D?

y is the calendar year; Y is the ISO week-numbering year, which differs for a few days around 1 January, so YYYY-MM-dd prints the wrong year on 29–31 December in some years. Angular throws a "Suspicious use of week-based year" error in development when Y is used without w. D (day of year) is not supported at all; only d exists.

How do I show the date in another language?

Register the locale data once with registerLocaleData(localeFr) from '@angular/common/locales/fr', then pass the locale as the pipe's last argument or set LOCALE_ID for the whole app. Without registration Angular throws 'Missing locale data for the locale "fr"'. The B and b day-period tokens also need the extra data from '@angular/common/locales/extra/fr'.

What does digitsInfo mean in the number, currency and percent pipes?

It is '{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}'. '1.2-2' always shows two decimals; '3.0-0' pads to three integer digits and rounds to a whole number. The defaults are 1.0-3 for number, 1.0-0 for percent, and the currency's own decimals for currency (2 for USD, 0 for JPY, 3 for KWD). Values are rounded half away from zero, so 2.5 becomes 3.

Why does the currency pipe show USD when my locale is fr or en-IN?

The currency code argument defaults to DEFAULT_CURRENCY_CODE, which is USD unless you provide it, whatever the locale. Pass the code explicitly ({{ price | currency: 'EUR' }}) or provide DEFAULT_CURRENCY_CODE in your app config.

Is this the real Angular output?

The tester runs the same formatting algorithms as @angular/common 22.2 with its own CLDR locale data, and was checked against the real formatDate, formatNumber, formatCurrency and formatPercent across every token, named format and locale on the page. Everything runs in your browser.

Sources & Official Resources

Tokens, defaults and locale data follow @angular/common 22.2. Last reviewed October 12, 2026.

• DatePipe API and format tokens (angular.dev)
• DecimalPipe (number) API (angular.dev)
• CurrencyPipe API (angular.dev)
• PercentPipe API (angular.dev)
• Import global variants of the locale data (angular.dev)
• format_date.ts and format_number.ts source (GitHub)

Moving templates to the new syntax? The Control Flow Converter rewrites *ngIf and *ngFor. More in Angular tools.