fixed code

src/components/DateCalendarPopup.jsx

@@ -4,11 +4,14 @@ 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 dayNames = 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());
+
+  const selectedDate = new Date(date);
+  const isValidDate = !Number.isNaN(selectedDate.getTime());
+
+  const [year, setYear] = useState(isValidDate ? selectedDate.getFullYear() : new Date().getFullYear());
+  const [month, setMonth] = useState(isValidDate ? selectedDate.getMonth() : new Date().getMonth());
 
   useEffect(() => {
     const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
@@ -16,6 +19,24 @@ export default function DateCalendarPopup({ date, onClose }) {
     return () => document.removeEventListener("mousedown", handler);
   }, [onClose]);
 
+  const goToPrevMonth = () => {
+    if (month === 0) {
+      setMonth(11);
+      setYear(y => y - 1);
+    } else {
+      setMonth(m => m - 1);
+    }
+  };
+
+  const goToNextMonth = () => {
+    if (month === 11) {
+      setMonth(0);
+      setYear(y => y + 1);
+    } else {
+      setMonth(m => m + 1);
+    }
+  };
+
   const firstDay = new Date(year, month, 1).getDay();
   const offset = firstDay === 0 ? 6 : firstDay - 1;
   const daysInMonth = new Date(year, month + 1, 0).getDate();
@@ -25,27 +46,33 @@ export default function DateCalendarPopup({ date, onClose }) {
   for (let i = 1; i <= daysInMonth; i++) cells.push(i);
 
   const isSameDay = (day) =>
-    d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
+      isValidDate &&
+      selectedDate.getFullYear() === year &&
+      selectedDate.getMonth() === month &&
+      selectedDate.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 className="f-date-calendar" ref={ref}>
+        <div className="f-cal-header">
+          <button type="button" onClick={goToPrevMonth}>‹</button>
+          <span>{months[month]} {year}</span>
+          <button type="button" onClick={goToNextMonth}>›</button>
+        </div>
+        <div className="f-cal-grid">
+          {dayNames.map(dayName => (
+              <div key={dayName} className="f-cal-day-name">{dayName}</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>
-      <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>
   );
-}
+}