ReadOnlyMonthYearField

ReadOnlyMonthYearField renderiza un valor de mes y año como salida no editable. Formatea el valor para que sea legible por humanos, mostrando solo el mes y el año sin un día específico. Se usa en pantallas de detalle y visualización para períodos de facturación, fechas de vencimiento o cualquier atributo de fecha a nivel de mes.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | No | — | String de mes-año (ej. "2024-06" o "06/2024"). 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 ReadOnlyMonthYearField from '@/components/read-only-fields/ReadOnlyMonthYearField';

<ReadOnlyMonthYearField
  label="Período de facturación"
  value="2024-06"
/>

Con descripción

<ReadOnlyMonthYearField
  label="Vencimiento de la tarjeta"
  value={card.expiryMonthYear}
  description="El mes y año en que vence la tarjeta."
/>