131 lines
3.9 KiB
JavaScript
131 lines
3.9 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";
|
|
import "moment-timezone";
|
|
|
|
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 [autoSelected, setAutoSelected] = useState(false);
|
|
|
|
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]);
|
|
|
|
// انتخاب خودکار امروز یا نزدیکترین روز قابل انتخاب
|
|
useEffect(() => {
|
|
if (!loading && !autoSelected && disabledDates) {
|
|
const today = moment().tz("Asia/Tehran");
|
|
const todayTimestamp = moment().tz("Asia/Tehran").startOf("day").unix();
|
|
|
|
// بررسی اینکه امروز قابل انتخاب است یا نه
|
|
const isTodayDisabled = disabledDates.some((ts) =>
|
|
moment.unix(ts).startOf("day").isSame(today.startOf("day"))
|
|
);
|
|
|
|
if (!isTodayDisabled) {
|
|
// امروز قابل انتخاب است
|
|
setStartDate(today);
|
|
setDate(todayTimestamp);
|
|
setAutoSelected(true);
|
|
} else {
|
|
// پیدا کردن نزدیکترین روز قابل انتخاب
|
|
let nearestDate = null;
|
|
let daysToCheck = 30; // بررسی 30 روز آینده
|
|
|
|
for (let i = 1; i <= daysToCheck; i++) {
|
|
const futureDate = moment().tz("Asia/Tehran").add(i, "days");
|
|
const futureDateTimestamp = futureDate.clone().startOf("day").unix();
|
|
|
|
const isFutureDateDisabled = disabledDates.some((ts) =>
|
|
moment.unix(ts).startOf("day").isSame(futureDate.startOf("day"))
|
|
);
|
|
|
|
if (!isFutureDateDisabled) {
|
|
nearestDate = futureDate;
|
|
setStartDate(futureDate);
|
|
setDate(futureDateTimestamp);
|
|
setAutoSelected(true);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, [loading, disabledDates, autoSelected, setDate]);
|
|
|
|
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;
|