ReadOnlyDateField

ReadOnlyDateField renderiza un string de fecha como salida formateada no editable. Parsea el valor como fecha local (evitando problemas de zona horaria) y lo formatea usando Intl.DateTimeFormat con la configuración regional es-ES por defecto (DD/MM/AAAA). Si el parseo falla, muestra el valor original como fallback. Se usa en pantallas de detalle y visualización.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | No | — | String de fecha ISO (AAAA-MM-DD). Muestra "-" cuando está ausente. | | label | string | No | — | Etiqueta mostrada flotando encima del borde del campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo en cursiva. | | id | string | No | — | Atributo HTML id aplicado al elemento contenedor. | | className | string | No | — | Clase CSS adicional aplicada al elemento contenedor. | | containerStyle | React.CSSProperties | No | — | Estilos personalizados para el div contenedor externo. | | labelStyle | React.CSSProperties | No | — | Estilos personalizados para el elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos personalizados para el texto de descripción. |

Uso

Básico

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

<ReadOnlyDateField
  label="Fecha de nacimiento"
  value="1990-06-15"
/>

Sin valor

<ReadOnlyDateField
  label="Fecha de vencimiento"
  value={undefined}
/>
// Renderiza: -

Con descripción

<ReadOnlyDateField
  label="Inicio del contrato"
  value="2024-01-01"
  description="La fecha en que el contrato entra en vigencia."
/>