95 lines
2.5 KiB
JavaScript
95 lines
2.5 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 { request } from "@/services/response";
|
|
import moment from "moment-jalaali";
|
|
|
|
function DatePicker({ setDate }) {
|
|
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 [disableDates, setDisableDates] = useState([]);
|
|
|
|
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 (
|
|
disableDates.some((ts) => date.isSame(moment.unix(ts).startOf("day")))
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
useEffect(() => {
|
|
request
|
|
.getAppointmentNotAvailable(47)
|
|
.then((res) => {
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 1000);
|
|
setDisableDates(res.data);
|
|
})
|
|
.catch((err) => {
|
|
});
|
|
if (nextIconDatePickerS.current) {
|
|
nextIconDatePickerS.current.click();
|
|
}
|
|
}, [nextIconDatePickerS]);
|
|
|
|
return (
|
|
<div className="datePickerApt flex items-start custom-datepicker justify-evenly w-full">
|
|
<FirstDatePicker
|
|
loading={loading}
|
|
startDate={startDate}
|
|
disableDates={disableDates}
|
|
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;
|