Merge branch 'main' into add_booking_confirmed_webhook_event
commit
d9a46bbd5e
|
@ -86,12 +86,24 @@ function DatePicker({
|
||||||
const { i18n } = useLocale();
|
const { i18n } = useLocale();
|
||||||
const [browsingDate, setBrowsingDate] = useState<Dayjs | null>(date);
|
const [browsingDate, setBrowsingDate] = useState<Dayjs | null>(date);
|
||||||
|
|
||||||
|
const [month, setMonth] = useState<string>("");
|
||||||
|
const [year, setYear] = useState<string>("");
|
||||||
|
const [isFirstMonth, setIsFirstMonth] = useState<boolean>(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!browsingDate || (date && browsingDate.utcOffset() !== date?.utcOffset())) {
|
if (!browsingDate || (date && browsingDate.utcOffset() !== date?.utcOffset())) {
|
||||||
setBrowsingDate(date || dayjs().tz(timeZone()));
|
setBrowsingDate(date || dayjs().tz(timeZone()));
|
||||||
}
|
}
|
||||||
}, [date, browsingDate]);
|
}, [date, browsingDate]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (browsingDate) {
|
||||||
|
setMonth(browsingDate.toDate().toLocaleString(i18n.language, { month: "long" }));
|
||||||
|
setYear(browsingDate.format("YYYY"));
|
||||||
|
setIsFirstMonth(browsingDate.startOf("month").isBefore(dayjs()));
|
||||||
|
}
|
||||||
|
}, [browsingDate, i18n.language]);
|
||||||
|
|
||||||
const days = useMemo(() => {
|
const days = useMemo(() => {
|
||||||
if (!browsingDate) {
|
if (!browsingDate) {
|
||||||
return [];
|
return [];
|
||||||
|
@ -156,19 +168,14 @@ function DatePicker({
|
||||||
}>
|
}>
|
||||||
<div className="flex mb-4 text-xl font-light text-gray-600">
|
<div className="flex mb-4 text-xl font-light text-gray-600">
|
||||||
<span className="w-1/2 text-gray-600 dark:text-white">
|
<span className="w-1/2 text-gray-600 dark:text-white">
|
||||||
<strong className="text-gray-900 dark:text-white">
|
<strong className="text-gray-900 dark:text-white">{month}</strong>{" "}
|
||||||
{browsingDate.toDate().toLocaleString(i18n.language, { month: "long" })}
|
<span className="text-gray-500">{year}</span>
|
||||||
</strong>{" "}
|
|
||||||
<span className="text-gray-500">{browsingDate.format("YYYY")}</span>
|
|
||||||
</span>
|
</span>
|
||||||
<div className="w-1/2 text-right text-gray-600 dark:text-gray-400">
|
<div className="w-1/2 text-right text-gray-600 dark:text-gray-400">
|
||||||
<button
|
<button
|
||||||
onClick={decrementMonth}
|
onClick={decrementMonth}
|
||||||
className={classNames(
|
className={classNames("group mr-2 p-1", isFirstMonth && "text-gray-400 dark:text-gray-600")}
|
||||||
"group mr-2 p-1",
|
disabled={isFirstMonth}
|
||||||
browsingDate.startOf("month").isBefore(dayjs()) && "text-gray-400 dark:text-gray-600"
|
|
||||||
)}
|
|
||||||
disabled={browsingDate.startOf("month").isBefore(dayjs())}
|
|
||||||
data-testid="decrementMonth">
|
data-testid="decrementMonth">
|
||||||
<ChevronLeftIcon className="w-5 h-5 group-hover:text-black dark:group-hover:text-white" />
|
<ChevronLeftIcon className="w-5 h-5 group-hover:text-black dark:group-hover:text-white" />
|
||||||
</button>
|
</button>
|
||||||
|
|
Loading…
Reference in New Issue