marco.pms.web/src/components/common/DateRangePicker.jsx

import React, { useEffect, useRef } from "react";
import { useController, useFormContext, useWatch } from "react-hook-form";
import { useSelector } from "react-redux";

const DateRangePicker = ({
  md=12,
  sm=6,
  onRangeChange,
  DateDifference = 7,
  endDateMode = "yesterday",
}) => {
  const inputRef = useRef(null);

  const persistedRange = useSelector(
    (store) => store.localVariables.attendance.defaultDateRange
  );

  useEffect(() => {
    let startDate, endDate;

    if (persistedRange?.startDate && persistedRange?.endDate) {
      startDate = new Date(persistedRange.startDate);
      endDate = new Date(persistedRange.endDate);
    } else {
      endDate = new Date();
      if (endDateMode === "yesterday") {
        endDate.setDate(endDate.getDate() - 1);
      }
      endDate.setHours(0, 0, 0, 0);

      startDate = new Date(endDate);
      startDate.setDate(endDate.getDate() - (DateDifference - 1));
      startDate.setHours(0, 0, 0, 0);
    }

    const fp = flatpickr(inputRef.current, { 
      mode: "range",
      dateFormat: "Y-m-d",
      altInput: true,
      altFormat: "d-m-Y",
      defaultDate: [startDate, endDate],
      static: true,
      clickOpens: true,
      maxDate: endDate,
      onChange: (selectedDates, dateStr) => {
        const [startDateString, endDateString] = dateStr.split(" to ");
        onRangeChange?.({ startDate: startDateString, endDate: endDateString });
      },
    });

    onRangeChange?.({
      startDate: startDate.toLocaleDateString("en-CA"),
      endDate: endDate.toLocaleDateString("en-CA"),
    });

    return () => fp.destroy();
  }, [onRangeChange, DateDifference, endDateMode, persistedRange]);

  const handleIconClick = () => {
    if (inputRef.current?._flatpickr) {
      inputRef.current._flatpickr.open();
    }
  };

  return (
<div className={`position-relative w-auto justify-content-center`}>
  <input
    type="text"
    className="form-control form-control-sm w-100 pe-8  " 
    placeholder="From to End"
    id="flatpickr-range"
    ref={inputRef}
  />

  <i
    className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
    onClick={handleIconClick}
  />
</div>


  );
};

export default DateRangePicker;






export const DateRangePicker1 = ({
  startField = "startDate",
  endField = "endDate",
  placeholder = "Select date range",
  className = "",
  allowText = false,
  resetSignal,
  defaultRange = true,
  maxDate = null,
  ...rest
}) => {
  const inputRef = useRef(null);
  const { control, setValue, getValues } = useFormContext();

  const {
    field: { ref },
  } = useController({ name: startField, control });

  const applyDefaultDates = () => {
    const today = new Date();
    const past = new Date();
    past.setDate(today.getDate() - 6);

    const format = (d) => flatpickr.formatDate(d, "d-m-Y");
    const formattedStart = format(past);
    const formattedEnd = format(today);

    setValue(startField, formattedStart, { shouldValidate: true });
    setValue(endField, formattedEnd, { shouldValidate: true });

    if (inputRef.current?._flatpickr) {
      inputRef.current._flatpickr.setDate([past, today]);
    }
  };

  useEffect(() => {
    if (!inputRef.current || inputRef.current._flatpickr) return;

    const instance = flatpickr(inputRef.current, {
      mode: "range",
      dateFormat: "d-m-Y",
      allowInput: allowText,
      maxDate ,
      onChange: (selectedDates) => {
        if (selectedDates.length === 2) {
          const [start, end] = selectedDates;
          const format = (d) => flatpickr.formatDate(d, "d-m-Y");
          setValue(startField, format(start), { shouldValidate: true });
          setValue(endField, format(end), { shouldValidate: true });
        } else {
          setValue(startField, "", { shouldValidate: true });
          setValue(endField, "", { shouldValidate: true });
        }
      },
      ...rest,
    });

    const currentStart = getValues(startField);
    const currentEnd = getValues(endField);
    if (defaultRange && !currentStart && !currentEnd) {
      applyDefaultDates();
    } else if (currentStart && currentEnd) {
      instance.setDate([
        flatpickr.parseDate(currentStart, "d-m-Y"),
        flatpickr.parseDate(currentEnd, "d-m-Y"),
      ]);
    }

    return () => instance.destroy();
  }, []);

  useEffect(() => {
  if (resetSignal !== undefined) {
    if (defaultRange) {
      applyDefaultDates();
    } else {
      setValue(startField, "", { shouldValidate: true });
      setValue(endField, "", { shouldValidate: true });

      if (inputRef.current?._flatpickr) {
        inputRef.current._flatpickr.clear();
      }
    }
  }
}, [resetSignal, defaultRange, setValue, startField, endField]);


  const start = getValues(startField);
  const end = getValues(endField);
  const formattedValue = start && end ? `${start} To ${end}` : "";

  return (
    <div className={`position-relative ${className}`}>
      <input
        type="text"
        className="form-control form-control-sm"
        placeholder={placeholder}
        defaultValue={formattedValue}
        ref={(el) => {
          inputRef.current = el;
          ref(el);
        }}
        readOnly={!allowText}
        autoComplete="off"
      />
      <span
        className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
        onClick={() => inputRef.current?._flatpickr?.open()}
      >
        <i className="bx bx-calendar bx-sm fs-5 text-muted"></i>
      </span>
    </div>
  );
};