ReadOnlyDateField

ReadOnlyDateField renders a date string as non-editable formatted output. It parses the value as a local date (avoiding timezone offset issues) and formats it using Intl.DateTimeFormat with the es-ES locale by default (DD/MM/YYYY). If parsing fails, the raw value is displayed as a fallback. Used in detail and view screens.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | No | — | ISO date string (YYYY-MM-DD). Displays "-" when absent. | | label | string | No | — | Label shown as a floating overlay above the field border. | | description | string | No | — | Helper text shown below the field in italic. | | id | string | No | — | HTML id attribute applied to the container element. | | className | string | No | — | Additional CSS class applied to the container element. | | containerStyle | React.CSSProperties | No | — | Style overrides for the outer wrapper div. | | labelStyle | React.CSSProperties | No | — | Style overrides for the label element. | | descriptionStyle | React.CSSProperties | No | — | Style overrides for the description text. |

Usage

Basic

import ReadOnlyDateField from '@/components/read-only-fields/ReadOnlyDateField';

<ReadOnlyDateField
  label="Date of Birth"
  value="1990-06-15"
/>

Without a value

<ReadOnlyDateField
  label="Expiry Date"
  value={undefined}
/>
// Renders: -

With description

<ReadOnlyDateField
  label="Contract Start"
  value="2024-01-01"
  description="The date on which the contract becomes effective."
/>