---
url: "https://vueda.dev/v3/reference/api/vue/DateRangeDisplay.md"
title: "DateRangeDisplay"
---

# DateRangeDisplay

## Overview

Displays a formatted date range from a start and end value (ISO strings or Luxon DateTimes).
Renders a single date when both values fall on the same day, and omits redundant year or month
segments when the range stays within the same month or year.

Theme entry: [DateRangeDisplay](/v3/reference/theming/keys/DateRangeDisplay.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-start">start</span> | `string\|object` | yes |  | Start of the date range as an ISO string or Luxon DateTime. |
| <span id="prop-end">end</span> | `string\|object` | yes |  | End of the date range as an ISO string or Luxon DateTime. |
| <span id="prop-showTime">showTime</span> | `boolean` |  | `false` | Whether to include the time when both dates fall on the same day. |
| <span id="prop-locale">locale</span> | `string` |  | `"en-CA"` | BCP 47 locale tag used to format the displayed date segments. |

## Source

`client/lib/display/date-display/DateRangeDisplay.vue`