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

# DateTimeDisplay

## Overview

Displays a datetime value (ISO string, JS Date, or Luxon DateTime) in absolute, relative,
inline, or break format, with an optional tooltip showing the complementary representation.
The relative label updates automatically every minute (and every second for very recent times).

Theme entry: [DateTimeDisplay](/v3/reference/theming/keys/DateTimeDisplay.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-value">value</span> | `string\|object\|date` |  | `""` | The datetime value to display, accepted as an ISO string, JS Date, or Luxon DateTime. |
| <span id="prop-format">format</span> | `string\|object` |  | `"inline"` | Display layout: `"inline"`, `"break"`, `"absolute"`, `"relative"`, `"default"`, or a custom Luxon format string/object. |
| <span id="prop-tooltipFormat">tooltipFormat</span> | `string\|object` |  | `"default"` | Luxon format string or options object used for the tooltip when a custom format is active. |
| <span id="prop-showTime">showTime</span> | `boolean` |  | `true` | Whether to include the time portion in absolute date output. |
| <span id="prop-showTooltip">showTooltip</span> | `boolean` |  | `true` | Whether to show the complementary representation as a tooltip on hover. |
| <span id="prop-inline">inline</span> | `boolean` |  | `false` | When true, renders without a wrapping div so the output is inline in the document flow. |
| <span id="prop-showRelative">showRelative</span> | `boolean` |  | `true` | Whether to display the relative time label alongside the absolute date. |

## Source

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