75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface Props {
|
|
onChange: (desde: string, hasta: string) => void;
|
|
initialYear?: number;
|
|
}
|
|
|
|
export default function MonthYearPicker({
|
|
onChange,
|
|
initialYear,
|
|
}: Props) {
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
const [mes, setMes] = useState<number | null>(null);
|
|
const [anio, setAnio] = useState<number>(
|
|
initialYear || currentYear
|
|
);
|
|
|
|
// Generar rango automáticamente
|
|
useEffect(() => {
|
|
if (mes !== null && anio !== null) {
|
|
const inicio = new Date(anio, mes, 1);
|
|
const fin = new Date(anio, mes + 1, 0);
|
|
|
|
const formato = (fecha: Date) =>
|
|
fecha.toISOString().split("T")[0];
|
|
|
|
onChange(formato(inicio), formato(fin));
|
|
}
|
|
}, [mes, anio, onChange]);
|
|
|
|
return (
|
|
<div className="flex gap-3 mb-5">
|
|
{/* MES */}
|
|
<select
|
|
className="border rounded-lg px-3 py-2"
|
|
onChange={(e) => setMes(Number(e.target.value))}
|
|
defaultValue=""
|
|
>
|
|
<option value="" disabled>
|
|
Selecciona mes
|
|
</option>
|
|
<option value={0}>Enero</option>
|
|
<option value={1}>Febrero</option>
|
|
<option value={2}>Marzo</option>
|
|
<option value={3}>Abril</option>
|
|
<option value={4}>Mayo</option>
|
|
<option value={5}>Junio</option>
|
|
<option value={6}>Julio</option>
|
|
<option value={7}>Agosto</option>
|
|
<option value={8}>Septiembre</option>
|
|
<option value={9}>Octubre</option>
|
|
<option value={10}>Noviembre</option>
|
|
<option value={11}>Diciembre</option>
|
|
</select>
|
|
|
|
<select
|
|
className="border rounded-lg px-3 py-2"
|
|
value={anio}
|
|
onChange={(e) => setAnio(Number(e.target.value))}
|
|
>
|
|
{Array.from(
|
|
{ length: currentYear - 2000 + 1 },
|
|
(_, i) => 2000 + i
|
|
).map((year) => (
|
|
<option key={year} value={year}>
|
|
{year}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
} |