# Date Stamp

> A date over a time, for a table cell.

Source: https://ngwr.dev/reference/components/date-stamp  
Kind: Component  
Added in v16.1

## Installation

Import the class, and `@use` the entry point in your global styles. Nothing warns you when the `@use` is missing.

```typescript
import { Component } from '@angular/core';
import { WrDateStamp } from 'ngwr/date-stamp';

@Component({ imports: [WrDateStamp] })
export class MyComponent {}
```

```scss
@use 'ngwr/date-stamp';
```

## Basic

Takes a `Date`, epoch milliseconds or a string, read as `wrDate` reads it. Both lines sit in one `<time>` with the instant in `datetime`.

```angular-html
<wr-date-stamp [value]="order.createdAt" />
<wr-date-stamp value="2026-11-12T08:45:00Z" />
```

## In a table

A `[wrTableCell]` template puts a stamp in a column. The digits are tabular, so a column lines up.

```angular-html
<wr-table [columns]="columns" [items]="shifts">
  <ng-template wrTableCell="createdAt" let-value>
    <wr-date-stamp [value]="value" />
  </ng-template>
  <ng-template wrTableCell="closedAt" let-value>
    <wr-date-stamp [value]="value" />
  </ng-template>
</wr-table>
```

## Formats

`dateFormat` and `timeFormat` take a named key or a token string, as `wrDate` does.

```angular-html
<wr-date-stamp [value]="at" dateFormat="longDate" timeFormat="time24hSeconds" />
<wr-date-stamp [value]="at" dateFormat="d MMM yyyy" timeFormat="HH:mm" />
```

## Time zone and language

An instant is shown in the [display time zone](https://ngwr.dev/docs/configuration) and both lines are written in the interface language. They follow both at runtime.

```angular-ts
import { provideWr } from 'ngwr';
import { withDates } from 'ngwr/date';
import { provideWrI18n } from 'ngwr/i18n';

providers: [
  provideWrI18n({ defaultLocale: 'ru', availableLocales: ['ru', 'en'] }),
  provideWr(withDates({ timeZone: 'Asia/Almaty' })),
],

// <wr-date-stamp value="2026-11-12T08:45:00Z" />
// 12 нояб. 2026 г.
// 13:45
```

## Date only

A date-only string is a day: it shows the date line alone and does not shift with the zone.

```angular-html
<wr-date-stamp value="2026-11-12" />
```

## Empty

`null`, `undefined`, `''` and a value that is not a date show `emptyLabel`. The `copyValue.empty` catalog key changes it everywhere, for `wr-copy-value` too.

```angular-html
<wr-date-stamp [value]="null" />
<wr-date-stamp [value]="shift.closedAt" emptyLabel="not closed" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `value` | The moment shown: a `Date`, epoch milliseconds, or a string `wrParseDate` reads. `null`, `undefined`, `''` and a value that is not a date are empty. | `Date \| string \| number \| null \| undefined` | `null` |
| `dateFormat` | Format of the first line: a named key or a token string (`'d MMM yyyy'`). | `WrDateFormat \| string` | `'mediumDate'` |
| `timeFormat` | Format of the second line: a named key (`'time24hSeconds'`) or a token string (`'HH:mm'`). | `WrDateFormat \| string` | `'time'` |
| `emptyLabel` | What stands in for an empty value. Falls back to `copyValue.empty`, then `'-'`. | `string \| null` | `null` |

## CSS variables

Set these on the element itself, with a rule more specific than its Declared on selector. In a global stylesheet, put a class of yours on an ancestor it really has: `<body>` for an overlay panel, which renders outside your markup. In a component stylesheet the selector alone works, but only for an element in that component's own template. A value on a wrapper or `:root` is shadowed, because `ngwr/date-stamp` declares each default on its own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-date-stamp-date-color` | `inherit` | `.wr-date-stamp` |
| `--wr-date-stamp-empty-color` | `var(--wr-color-on-surface-muted)` | `.wr-date-stamp` |
| `--wr-date-stamp-gap` | `0` | `.wr-date-stamp` |
| `--wr-date-stamp-line-height` | `var(--wr-text-sm-leading)` | `.wr-date-stamp` |
| `--wr-date-stamp-time-color` | `var(--wr-color-on-surface-muted)` | `.wr-date-stamp` |
| `--wr-date-stamp-time-font-size` | `var(--wr-text-sm)` | `.wr-date-stamp` |

## Dependencies

| Built on | `ngwr/date` |
| --- | --- |

## See also

- [wrDate](https://ngwr.dev/reference/pipes/wr-date) — Format a date with a named preset or a token string.
- [Configuration](https://ngwr.dev/docs/configuration) — Set app-wide options at bootstrap.
- [Table](https://ngwr.dev/reference/components/table) — Rows of data with sorting, filtering, paging and custom cells.
- [Copy Value](https://ngwr.dev/reference/components/copy-value) — A value with a copy button beside it.
- [Descriptions](https://ngwr.dev/reference/components/descriptions) — A read-only list of labels and their values.