ReadOnlyDateTimeField

ReadOnlyDateTimeField renderiza un valor combinado de fecha y hora como salida no editable. Formatea el valor para que sea legible por humanos, mostrando tanto la fecha como la parte de hora. Se usa en pantallas de detalle y visualización para marcas de tiempo como fechas de creación, horarios de citas o programaciones de eventos.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | No | — | String de fecha y hora ISO (ej. "2024-06-15T14:30:00"). Muestra "-" cuando está ausente. | | label | string | No | — | Etiqueta mostrada encima del campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo en cursiva. | | 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 ReadOnlyDateTimeField from '@/components/read-only-fields/ReadOnlyDateTimeField';

<ReadOnlyDateTimeField
  label="Creado el"
  value="2024-06-15T14:30:00"
/>

Sin valor

<ReadOnlyDateTimeField
  label="Última actualización"
  value={undefined}
/>
// Renderiza: -

Con descripción

<ReadOnlyDateTimeField
  label="Turno"
  value={appointment.scheduledAt}
  description="Fecha y hora del turno programado."
/>