hamedandClaude Opus 4.8
779113bb19
The two months rendered reversed (current month on the left). Pin the calendar row to dir=rtl and render the base month first so the current month sits on the right and the next month on the left, matching the design. Pin each month header to dir=ltr so the nav arrows stay on the expected outer edges regardless of the RTL flip. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
73 lines
2.3 KiB
JavaScript
73 lines
2.3 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import moment from "moment-jalaali";
|
|
import "moment-timezone";
|
|
import { dateToTimestamp } from "@/helper";
|
|
import InlineJalaliMonth from "@/components/common/InlineJalaliMonth";
|
|
|
|
function DatePicker({ setDate, disabledDates = [] }) {
|
|
const [baseMonth, setBaseMonth] = useState(moment().tz("Asia/Tehran"));
|
|
const [selectedDate, setSelectedDate] = useState(null);
|
|
const [autoSelected, setAutoSelected] = useState(false);
|
|
|
|
const isDisabled = (date) => {
|
|
const day = moment(date).startOf("day");
|
|
if (day.isBefore(moment().startOf("day"))) return true;
|
|
return disabledDates.some((ts) => day.isSame(moment.unix(ts).startOf("day")));
|
|
};
|
|
|
|
const selectDay = (date) => {
|
|
if (isDisabled(date)) return;
|
|
setSelectedDate(date);
|
|
setDate(dateToTimestamp(date));
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (autoSelected) return;
|
|
|
|
const today = moment().tz("Asia/Tehran");
|
|
for (let i = 0; i <= 30; i++) {
|
|
const candidate = today.clone().add(i, "days");
|
|
if (!isDisabled(candidate)) {
|
|
setSelectedDate(candidate);
|
|
setBaseMonth(candidate.clone());
|
|
setDate(candidate.clone().startOf("day").unix());
|
|
setAutoSelected(true);
|
|
break;
|
|
}
|
|
}
|
|
}, [disabledDates, autoSelected, setDate]);
|
|
|
|
const secondMonth = moment(baseMonth).add(1, "jMonth");
|
|
|
|
return (
|
|
<div dir="rtl" className="datePickerApt flex items-start justify-evenly gap-[24px] w-full">
|
|
<div className="w-full lg:w-1/2">
|
|
<InlineJalaliMonth
|
|
displayDate={baseMonth}
|
|
selectedDate={selectedDate}
|
|
onSelectDay={selectDay}
|
|
isDisabled={isDisabled}
|
|
showNext={false}
|
|
onPrev={() => setBaseMonth(moment(baseMonth).subtract(1, "jMonth"))}
|
|
onNext={() => setBaseMonth(moment(baseMonth).add(1, "jMonth"))}
|
|
/>
|
|
</div>
|
|
<div className="hidden md:block lg:hidden xl:block w-1/2">
|
|
<InlineJalaliMonth
|
|
displayDate={secondMonth}
|
|
selectedDate={selectedDate}
|
|
onSelectDay={selectDay}
|
|
isDisabled={isDisabled}
|
|
showPrev={false}
|
|
onNext={() => setBaseMonth(moment(baseMonth).add(1, "jMonth"))}
|
|
onPrev={() => setBaseMonth(moment(baseMonth).subtract(1, "jMonth"))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DatePicker;
|