first commit

src/components/dates/CalendarRange.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Button } from "../button/Button";
+// import "./calendar.css";
+
+
+const DOW = ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"];
+
+function startOfMonth(d: Date) { return new Date(d.getFullYear(), d.getMonth(), 1); }
+function endOfMonth(d: Date) { return new Date(d.getFullYear(), d.getMonth() + 1, 0); }
+function addMonths(d: Date, n: number) { return new Date(d.getFullYear(), d.getMonth() + n, 1); }
+function toKey(d: Date) { return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`; }
+function inRange(d: Date, a?: Date, b?: Date) {
+  if (!a || !b) return false;
+  const t = d.setHours(0,0,0,0);
+  const ta = a.getTime();
+  const tb = b.getTime();
+  return t >= Math.min(ta, tb) && t <= Math.max(ta, tb);
+}
+function sameDay(a?: Date, b?: Date) {
+  if (!a || !b) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+export function CalendarRange(props: {
+  value?: { start?: Date; end?: Date };
+  onChange: (v: { start?: Date; end?: Date }) => void;
+}) {
+  const [month, setMonth] = React.useState<Date>(() => startOfMonth(props.value?.start ?? new Date()));
+  const start = props.value?.start;
+  const end = props.value?.end;
+
+  const startM = startOfMonth(month);
+  const endM = endOfMonth(month);
+
+  const jsDow = startM.getDay();
+  const shift = (jsDow + 6) % 7;
+
+  const days: { date: Date; muted: boolean }[] = [];
+  const prevMonthEnd = new Date(startM.getFullYear(), startM.getMonth(), 0);
+  for (let i = 0; i < shift; i++) {
+    const d = new Date(prevMonthEnd.getFullYear(), prevMonthEnd.getMonth(), prevMonthEnd.getDate() - (shift - 1 - i));
+    days.push({ date: d, muted: true });
+  }
+  for (let day = 1; day <= endM.getDate(); day++) {
+    days.push({ date: new Date(startM.getFullYear(), startM.getMonth(), day), muted: false });
+  }
+  while (days.length % 7 !== 0) {
+    const last = days[days.length - 1].date;
+    const d = new Date(last.getFullYear(), last.getMonth(), last.getDate() + 1);
+    days.push({ date: d, muted: true });
+  }
+
+  const title = month.toLocaleString("ru-RU", { month: "long", year: "numeric" });
+
+  const clickDay = (d: Date) => {
+    if (!start || (start && end)) {
+      props.onChange({ start: d, end: undefined });
+      return;
+    }
+    props.onChange({ start, end: d });
+  };
+
+  return (
+    <div className="ui-cal">
+      <div className="ui-cal__head">
+        <Button variant="ghost" tone="neutral" size="sm" onClick={() => setMonth(addMonths(month, -1))}>←</Button>
+        <div className="ui-cal__title">{title}</div>
+        <Button variant="ghost" tone="neutral" size="sm" onClick={() => setMonth(addMonths(month, 1))}>→</Button>
+      </div>
+
+      <div style={{ display: "flex", gap: 10, color: "var(--ui-muted)", fontSize: 12, marginBottom: 8 }}>
+        <div>От: {start ? start.toLocaleDateString("ru-RU") : "—"}</div>
+        <div>До: {end ? end.toLocaleDateString("ru-RU") : "—"}</div>
+      </div>
+
+      <div className="ui-cal__grid">
+        {DOW.map((d) => <div key={d} className="ui-cal__dow">{d}</div>)}
+        {days.map(({ date, muted }) => {
+          const selected = sameDay(date, start) || sameDay(date, end);
+          const range = inRange(new Date(date.getFullYear(), date.getMonth(), date.getDate()), start, end);
+          return (
+            <button
+              key={toKey(date)}
+              type="button"
+              className="ui-cal__day"
+              data-muted={muted ? "true" : "false"}
+              data-selected={selected ? "true" : "false"}
+              data-range={range && !selected ? "true" : "false"}
+              onClick={() => clickDay(date)}
+            >
+              {date.getDate()}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}