# wrDate

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

Source: https://ngwr.dev/reference/pipes/wr-date  
Kind: Pipe

## Import

```angular-ts
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.

```angular-html
{{ 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 -->
```

## 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.

```angular-html
{{ now | wrDate: 'dd.MM.yyyy' }}  <!-- 12.06.2026   -->
{{ now | wrDate: 'd MMMM yyyy' }} <!-- 12 June 2026 -->
```

## Playground

```html
{{ now | wrDate: 'mediumDateTime' }}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `wrDate` | Delegates 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

- [wr-date-picker](https://ngwr.dev/reference/components/date-picker) — Produces the Date values this pipe renders.
- [Date adapters](https://ngwr.dev/start/configuration) — Wire date-fns or Luxon to unlock token strings.