88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import FirstDatePicker from "./date/FirstDatePicker";
|
|
import SecondDatePicker from "./date/SecondDatePicker";
|
|
import { dateToTimestamp } from "@/helper";
|
|
import moment from "moment-jalaali";
|
|
|
|
function DatePicker({ setDate, disabledDates = [] }) {
|
|
const nextIconDatePickerF = useRef();
|
|
const prevIconDatePickerF = useRef();
|
|
const nextIconDatePickerS = useRef();
|
|
const prevIconDatePickerS = useRef();
|
|
|
|
const [startDate, setStartDate] = useState(null);
|
|
const [endDate, setEndDate] = useState();
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const handleStartDateChange = (date, e) => {
|
|
if (date) {
|
|
setDate(dateToTimestamp(date));
|
|
setEndDate(null);
|
|
setStartDate(date);
|
|
}
|
|
};
|
|
|
|
const handleEndDateChange = (date) => {
|
|
if (date) {
|
|
setDate(dateToTimestamp(date));
|
|
setEndDate(date);
|
|
setStartDate(null);
|
|
}
|
|
};
|
|
|
|
|
|
const handleDisableDate = (e) => {
|
|
const date = moment(e).startOf("day");
|
|
const today = moment().startOf("day");
|
|
|
|
if (date.isBefore(today)) return true;
|
|
|
|
if (
|
|
disabledDates.some((ts) => date.isSame(moment.unix(ts).startOf("day")))
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
useEffect(() => {
|
|
// تنظیم loading به false بعد از یک تاخیر کوتاه
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 1000);
|
|
|
|
if (nextIconDatePickerS.current) {
|
|
nextIconDatePickerS.current.click();
|
|
}
|
|
}, [nextIconDatePickerS, disabledDates]);
|
|
|
|
return (
|
|
<div className="datePickerApt flex items-start custom-datepicker justify-evenly w-full">
|
|
<FirstDatePicker
|
|
loading={loading}
|
|
startDate={startDate}
|
|
disableDates={disabledDates}
|
|
handleDisableDate={handleDisableDate}
|
|
nextIconDatePickerF={nextIconDatePickerF}
|
|
prevIconDatePickerF={prevIconDatePickerF}
|
|
prevIconDatePickerS={prevIconDatePickerS}
|
|
handleStartDateChange={handleStartDateChange}
|
|
/>
|
|
<SecondDatePicker
|
|
loading={loading}
|
|
endDate={endDate}
|
|
handleDisableDate={handleDisableDate}
|
|
nextIconDatePickerF={nextIconDatePickerF}
|
|
nextIconDatePickerS={nextIconDatePickerS}
|
|
prevIconDatePickerS={prevIconDatePickerS}
|
|
handleEndDateChange={handleEndDateChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DatePicker;
|