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

# DateRangeDisplay

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

> Inline date-range wrapper that prevents the paired dates and separator from wrapping apart.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/DateRangeDisplay.md#theme-key-DateRangeDisplay-root) | `whitespace-nowrap` | Inline date-range wrapper that prevents the paired dates and separator from wrapping apart. |
| [separator](/v3/reference/theming/keys/DateRangeDisplay.md#theme-key-DateRangeDisplay-separator) |  | Separator text between [DateRangeDisplay.from](/v3/reference/theming/keys/DateRangeDisplay.md#theme-key-DateRangeDisplay-from) and [DateRangeDisplay.to](/v3/reference/theming/keys/DateRangeDisplay.md#theme-key-DateRangeDisplay-to). |
| [from](/v3/reference/theming/keys/DateRangeDisplay.md#theme-key-DateRangeDisplay-from) |  | Start-date text segment, kept addressable for range-specific typography or color. |
| [to](/v3/reference/theming/keys/DateRangeDisplay.md#theme-key-DateRangeDisplay-to) |  | End-date text segment, kept separate from the start date for caller overrides. |

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

## root

> Inline date-range wrapper that prevents the paired dates and separator from wrapping apart.

Default classes:

`whitespace-nowrap`

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

<a id="theme-key-DateRangeDisplay-separator"></a>

## separator

> Separator text between [DateRangeDisplay.from](/v3/reference/theming/keys/DateRangeDisplay.md#theme-key-DateRangeDisplay-from) and [DateRangeDisplay.to](/v3/reference/theming/keys/DateRangeDisplay.md#theme-key-DateRangeDisplay-to).

Default classes:

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

<a id="theme-key-DateRangeDisplay-from"></a>

## from

> Start-date text segment, kept addressable for range-specific typography or color.

Default classes:

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

<a id="theme-key-DateRangeDisplay-to"></a>

## to

> End-date text segment, kept separate from the start date for caller overrides.

Default classes:

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