MonthYearField

MonthYearField renderiza un <input type="month"> y emite el valor seleccionado como una cadena YYYY-MM. Las props opcionales minMonthYear y maxMonthYear restringen el rango seleccionable.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | No | — | Valor actual en formato YYYY-MM. | | onChange | (value: string) => void | Sí | — | Llamado con la cadena YYYY-MM seleccionada cuando el usuario cambia el mes. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo del input. | | minMonthYear | string | No | — | Mes mínimo seleccionable en formato YYYY-MM. | | maxMonthYear | string | No | — | Mes máximo seleccionable en formato YYYY-MM. | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor raíz. | | inputStyle | React.CSSProperties | No | — | Estilos aplicados directamente al elemento <input>. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor raíz. | | id | string | No | — | Atributo id del contenedor raíz. |

Uso

Básico

import React, { useState } from 'react';
import MonthYearField from '@/components/fields/MonthYearField';

export default function Example() {
  const [month, setMonth] = useState('');

  return (
    <MonthYearField
      label="Mes de facturación"
      value={month}
      onChange={setMonth}
    />
  );
}

Con restricciones de mínimo y máximo

<MonthYearField
  label="Período del reporte"
  value={period}
  onChange={setPeriod}
  minMonthYear="2023-01"
  maxMonthYear="2025-12"
  description="Seleccioná un mes entre enero 2023 y diciembre 2025."
/>