Schleifen Chart von bis Kalendar

components/modales/kueModal/DateRangePicker.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+interface DateRangePickerProps {
+  setVonDatum: (date: Date) => void;
+  setBisDatum: (date: Date) => void;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  setVonDatum,
+  setBisDatum,
+}) => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(new Date());
+
+  return (
+    <div className="flex space-x-4">
+      <div>
+        <label className="block text-sm font-semibold">Von</label>
+        <DatePicker
+          selected={startDate}
+          onChange={(date) => {
+            setStartDate(date);
+            if (date) setVonDatum(date);
+          }}
+          selectsStart
+          startDate={startDate}
+          endDate={endDate}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-semibold">Bis</label>
+        <DatePicker
+          selected={endDate}
+          onChange={(date) => {
+            setEndDate(date);
+            if (date) setBisDatum(date);
+          }}
+          selectsEnd
+          startDate={startDate}
+          endDate={endDate}
+          minDate={startDate || undefined}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DateRangePicker;