added calendar on press create date

src/components/DateCalendarPopup.jsx

@@ -0,0 +1,50 @@
+import { useState, useEffect, useRef } from "react";
+
+const MONTHS = ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
+const DAYS = ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"];
+
+export default function DateCalendarPopup({ date, onClose }) {
+  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>
+  );
+}