CPLv4.0/components/modales/kueModal/DateRangePicker.tsx

import React, { useState, useEffect } 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,
}) => {
  // Nutze die Props als Standardwerte für das Datum
  const [startDate, setStartDate] = useState<Date>(new Date());
  const [endDate, setEndDate] = useState<Date>(new Date());

  useEffect(() => {
    setVonDatum(startDate);
    setBisDatum(endDate);
  }, []);

  return (
    <div className="flex space-x-4">
      <div>
        <label className="block text-sm font-semibold">Von</label>
        <DatePicker
          selected={startDate}
          onChange={(date) => {
            if (date) {
              setStartDate(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) => {
            if (date) {
              setEndDate(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;