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

# WidgetDateTimeReadOnly

## Overview

Read-only presentation for date, time, and datetime fields. Wraps
{@link WidgetReadOnly} so the row keeps its label association, theme slots,
and lookup behavior, and fills the value with {@link DateTimeDisplay} instead
of the raw serialized string.

`fieldMappings` selects this widget through `readOnlyWidget` and supplies the
per-type display options through `readOnlyWidgetProps`, which mirror the
`columnProps` that `columnMappings` gives `ColumnDateTime`. A read view and a
list therefore format the same field the same way, and an empty value renders
the same dash in both.

A consumer's own `default` slot still wins: this widget supplies the date
rendering only when the field has no `widget(fieldName)default` override.

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-format">format</span> | `string\|object` |  | `"absolute"` | Display layout passed to DateTimeDisplay; `"absolute"` matches the list column adapter. |
| <span id="prop-showTime">showTime</span> | `boolean` |  | `true` | Whether to include the time portion in the absolute output. |
| <span id="prop-showRelative">showRelative</span> | `boolean` |  | `true` | Whether to show the relative time label. |
| <span id="prop-showTooltip">showTooltip</span> | `boolean` |  | `true` | Whether to show the complementary representation as a hover tooltip. |
| <span id="prop-tooltipFormat">tooltipFormat</span> | `string\|object` |  | `"default"` | Luxon format used for the tooltip when a custom `format` is active. |

## Slots

### `slotName` {#slot-slotName}

Scoped slot.

## Source

`client/lib/widgets/WidgetDateTimeReadOnly.vue`