hamedandClaude Opus 4.8
cf705a894e
The day picker used a Popover-based JalaliDatePicker that only showed two empty text inputs on the booking page — the calendar was hidden until you clicked the input, so it never matched the design. Replace it with an always-visible inline two-month calendar (InlineJalaliMonth) rendered side by side: current month on the right, next on the left (RTL), weekday headers, Fridays in red, disabled days greyed, selected day in orange, shared month navigation on the outer edges. Preserves the existing contract: setDate(unix timestamp), disabledDates[], auto-select nearest available day. 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 className="datePickerApt flex items-start justify-evenly gap-[24px] w-full">
|
|
<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 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>
|
|
);
|
|
}
|
|
|
|
export default DatePicker;
|