52 lines
1.9 KiB
JavaScript
52 lines
1.9 KiB
JavaScript
import { useState, useEffect, useRef } from "react";
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
export default function DateCalendarPopup({ date, onClose }) {
|
||
const { t } = useTranslation();
|
||
const months = t('calendar.months', { returnObjects: true });
|
||
const days = t('calendar.days', { returnObjects: true });
|
||
const ref = useRef(null);
|
||
const d = new Date(date);
|
||
const [year, setYear] = useState(d.getFullYear());
|
||
const [month, setMonth] = useState(d.getMonth());
|
||
|
||
useEffect(() => {
|
||
const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
|
||
document.addEventListener("mousedown", handler);
|
||
return () => document.removeEventListener("mousedown", handler);
|
||
}, [onClose]);
|
||
|
||
const firstDay = new Date(year, month, 1).getDay();
|
||
const offset = firstDay === 0 ? 6 : firstDay - 1;
|
||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||
|
||
const cells = [];
|
||
for (let i = 0; i < offset; i++) cells.push(null);
|
||
for (let i = 1; i <= daysInMonth; i++) cells.push(i);
|
||
|
||
const isSameDay = (day) =>
|
||
d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
|
||
|
||
return (
|
||
<div className="f-date-calendar" ref={ref}>
|
||
<div className="f-cal-header">
|
||
<button onClick={() => setMonth(m => m === 0 ? (setYear(y => y - 1), 11) : m - 1)}>‹</button>
|
||
<span>{months[month]} {year}</span>
|
||
<button onClick={() => setMonth(m => m === 11 ? (setYear(y => y + 1), 0) : m + 1)}>›</button>
|
||
</div>
|
||
<div className="f-cal-grid">
|
||
{days.map(d => <div key={d} className="f-cal-day-name">{d}</div>)}
|
||
{cells.map((day, i) =>
|
||
day ? (
|
||
<div key={i}
|
||
className={`f-cal-day${isSameDay(day) ? " f-cal-selected" : ""}`}
|
||
>
|
||
{day}
|
||
</div>
|
||
) : <div key={i} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|