---
url: "https://vueda.dev/v3/reference/theming/keys/DateTimeDisplay.md"
title: "DateTimeDisplay"
---

# DateTimeDisplay

Source: `client/lib/theme/vueda-tailwind/display/index.js`

> Inline time wrapper with baseline spacing for absolute and relative text.

Vue component: [DateTimeDisplay](/v3/reference/api/vue/DateTimeDisplay.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/DateTimeDisplay.md#theme-key-DateTimeDisplay-root) | `flex items-center space-x-2` | Inline time wrapper with baseline spacing for absolute and relative text. |
| [inline](/v3/reference/theming/keys/DateTimeDisplay.md#theme-key-DateTimeDisplay-inline) | `whitespace-nowrap` | Single-line layout for compact absolute plus relative date text. |
| [break](/v3/reference/theming/keys/DateTimeDisplay.md#theme-key-DateTimeDisplay-break) |  | Stacked layout map for absolute and relative lines when inline space is not available. |
| [absolute](/v3/reference/theming/keys/DateTimeDisplay.md#theme-key-DateTimeDisplay-absolute) | `whitespace-nowrap` | Absolute timestamp segment; use for the precise value. |
| [relative](/v3/reference/theming/keys/DateTimeDisplay.md#theme-key-DateTimeDisplay-relative) | `whitespace-nowrap` | Relative timestamp segment; use for the human-readable offset. |
| [tooltip](/v3/reference/theming/keys/DateTimeDisplay.md#theme-key-DateTimeDisplay-tooltip) | `cursor-help` | Help cursor for timestamp text that exposes the companion value in a tooltip. |
| [dash](/v3/reference/theming/keys/DateTimeDisplay.md#theme-key-DateTimeDisplay-dash) |  | Empty-value dash slot, intentionally unstyled so surrounding text rhythm wins. |

<a id="theme-key-DateTimeDisplay-root"></a>

## root

> Inline time wrapper with baseline spacing for absolute and relative text.

Default classes:

`flex items-center space-x-2`

Source: `client/lib/theme/vueda-tailwind/display/DateTimeDisplay.theme.js:16`

<a id="theme-key-DateTimeDisplay-inline"></a>

## inline

> Single-line layout for compact absolute plus relative date text.

Default classes:

`whitespace-nowrap`

Source: `client/lib/theme/vueda-tailwind/display/DateTimeDisplay.theme.js:20`

<a id="theme-key-DateTimeDisplay-break"></a>

## break

> Stacked layout map for absolute and relative lines when inline space is not available.

Source: `client/lib/theme/vueda-tailwind/display/DateTimeDisplay.theme.js:24`

<a id="theme-key-DateTimeDisplay-absolute"></a>

## absolute

> Absolute timestamp segment; use for the precise value.

Default classes:

`whitespace-nowrap`

Source: `client/lib/theme/vueda-tailwind/display/DateTimeDisplay.theme.js:29`

<a id="theme-key-DateTimeDisplay-relative"></a>

## relative

> Relative timestamp segment; use for the human-readable offset.

Default classes:

`whitespace-nowrap`

Source: `client/lib/theme/vueda-tailwind/display/DateTimeDisplay.theme.js:33`

<a id="theme-key-DateTimeDisplay-tooltip"></a>

## tooltip

> Help cursor for timestamp text that exposes the companion value in a tooltip.

Default classes:

`cursor-help`

Source: `client/lib/theme/vueda-tailwind/display/DateTimeDisplay.theme.js:37`

<a id="theme-key-DateTimeDisplay-dash"></a>

## dash

> Empty-value dash slot, intentionally unstyled so surrounding text rhythm wins.

Default classes:

Source: `client/lib/theme/vueda-tailwind/display/DateTimeDisplay.theme.js:41`