Skip to content

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

Props

NameTypeRequiredDefaultDescription
themeOverrideString|Object|ArraynullA partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
valuestring|object|date""The datetime value to display, accepted as an ISO string, JS Date, or Luxon DateTime.
formatstring|object"inline"Display layout: "inline", "break", "absolute", "relative", "default", or a custom Luxon format string/object.
tooltipFormatstring|object"default"Luxon format string or options object used for the tooltip when a custom format is active.
showTimebooleantrueWhether to include the time portion in absolute date output.
showTooltipbooleantrueWhether to show the complementary representation as a tooltip on hover.
inlinebooleanfalseWhen true, renders without a wrapping div so the output is inline in the document flow.
showRelativebooleantrueWhether to display the relative time label alongside the absolute date.

Source

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

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2