116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
"use client";
|
||
|
||
import moment from "moment-jalaali";
|
||
|
||
moment.loadPersian({ dialect: "persian-modern", usePersianDigits: false });
|
||
|
||
const WEEKDAYS = ["شنبه", "۱ شنبه", "۲ شنبه", "۳ شنبه", "۴ شنبه", "۵ شنبه", "جمعه"];
|
||
const MONTHS = [
|
||
"فروردین",
|
||
"اردیبهشت",
|
||
"خرداد",
|
||
"تیر",
|
||
"مرداد",
|
||
"شهریور",
|
||
"مهر",
|
||
"آبان",
|
||
"آذر",
|
||
"دی",
|
||
"بهمن",
|
||
"اسفند",
|
||
];
|
||
|
||
function buildDays(displayDate) {
|
||
const year = displayDate.jYear();
|
||
const month = displayDate.jMonth();
|
||
const daysInMonth = moment.jDaysInMonth(year, month);
|
||
const firstDayOfMonth = moment(`${year}/${month + 1}/1`, "jYYYY/jM/jD").day();
|
||
const startOffset = (firstDayOfMonth + 1) % 7;
|
||
|
||
const days = [];
|
||
for (let i = 0; i < startOffset; i++) days.push(null);
|
||
for (let day = 1; day <= daysInMonth; day++) days.push(day);
|
||
return days;
|
||
}
|
||
|
||
function InlineJalaliMonth({
|
||
displayDate,
|
||
selectedDate,
|
||
onSelectDay,
|
||
isDisabled,
|
||
onPrev,
|
||
onNext,
|
||
showPrev = true,
|
||
showNext = true,
|
||
prevBtnClass = "",
|
||
nextBtnClass = "",
|
||
}) {
|
||
const days = buildDays(displayDate);
|
||
|
||
return (
|
||
<div className="w-full">
|
||
<div dir="ltr" className="flex items-center justify-between mb-[16px] px-1">
|
||
<button
|
||
type="button"
|
||
onClick={onNext}
|
||
className={`p-1 text-[#525252] ${showNext ? "" : "invisible"} ${nextBtnClass}`}
|
||
aria-label="ماه بعد"
|
||
>
|
||
‹
|
||
</button>
|
||
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
|
||
{MONTHS[displayDate.jMonth()]} {displayDate.jYear()}
|
||
</p>
|
||
<button
|
||
type="button"
|
||
onClick={onPrev}
|
||
className={`p-1 text-[#525252] ${showPrev ? "" : "invisible"} ${prevBtnClass}`}
|
||
aria-label="ماه قبل"
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-7 gap-y-[12px] mb-[8px]">
|
||
{WEEKDAYS.map((label, idx) => (
|
||
<span
|
||
key={idx}
|
||
className="text-center text-[#9B9B9B] text-[11px] md:text-[12px] font-normal"
|
||
>
|
||
{label}
|
||
</span>
|
||
))}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-7 gap-y-[12px]">
|
||
{days.map((day, index) => {
|
||
if (!day) return <span key={index} />;
|
||
|
||
const dayDate = moment(displayDate).jDate(day);
|
||
const isFriday = dayDate.day() === 5;
|
||
const disabled = isDisabled(dayDate);
|
||
const selected =
|
||
selectedDate &&
|
||
dayDate.jYear() === selectedDate.jYear() &&
|
||
dayDate.jMonth() === selectedDate.jMonth() &&
|
||
dayDate.jDate() === selectedDate.jDate();
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
key={index}
|
||
disabled={disabled}
|
||
onClick={() => onSelectDay(dayDate)}
|
||
className={` mx-auto flex items-center justify-center w-[34px] h-[34px] rounded-full text-[14px] md:text-[16px] font-normal transition-colors ${selected ? "!bg-[#F17732] !text-[#FFF]" : ""} ${disabled ? "text-[#D7D7D7] cursor-not-allowed" : isFriday ? "text-[#E0383B]" : "text-[#525252] hover:bg-[#F5F5F5]"} `}
|
||
>
|
||
{day}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default InlineJalaliMonth;
|