Pipe

wrDate

Uses WrDateAdapter when provideWrDateAdapter() is wired up; otherwise falls back to Intl.DateTimeFormat with the same named format keys.

Import

import { WrDate } from 'ngwr/pipes';

@Component({ imports: [WrDate] })
export class MyComponent { /* ... */ }

Named keys

Six locale-aware presets work with or without an adapter — they map to Intl date/time styles.

{{ now | wrDate }}                    <!-- shortDate (default) -->
{{ now | wrDate: 'mediumDate' }}      <!-- Jun 12, 2026        -->
{{ now | wrDate: 'time' }}            <!-- 10:51 AM            -->
{{ now | wrDate: 'mediumDateTime' }}  <!-- Jun 12, 2026, 10:51 AM -->
shortDate9/14/2026
mediumDateSep 14, 2026
longDateSeptember 14, 2026
time04:18 PM
shortDateTime9/14/2026, 04:18 PM
mediumDateTimeSep 14, 2026, 04:18 PM

Token strings

A raw format string goes straight to the adapter, so the tokens are whichever ones THAT adapter knows — not a fixed language. The demo below runs on WrNativeDateAdapter, whose set is yyyy yy MMMM MMM MM M dd d HH H hh h mm ss a plus single-quoted literals. It has no weekday token: EEEE is not recognised and comes out verbatim. ngwr/date/adapters/fns forwards the pattern to date-fns untouched, so there the token set is date-fns's.

{{ now | wrDate: 'dd.MM.yyyy' }}  <!-- 12.06.2026   -->
{{ now | wrDate: 'd MMMM yyyy' }} <!-- 12 June 2026 -->
14.09.2026 · 14 September 2026 · 16:18:39

Playground

Sep 14, 2026, 04:18 PM

{{ now | wrDate: 'mediumDateTime' }}

Customize

Format

API

NameDescriptionTypeDefault
wrDateDelegates to WrDateAdapter when provided; falls back to Intl.DateTimeFormat with the same named keys.(value: Date | string | number | null | undefined, format: WrDateFormat | string = 'shortDate') => string

See also