"use client" import { type ChangeEvent, useState } from "react" import { DayPicker } from "react-day-picker" import { useIntl } from "react-intl" import { Lang } from "@/constants/languages" import { dt } from "@/lib/dt" import { CloseLargeIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import Body from "@/components/TempDesignSystem/Text/Body" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import useLang from "@/hooks/useLang" import styles from "./mobile.module.css" import classNames from "react-day-picker/style.module.css" import type { DatePickerProps } from "@/types/components/datepicker" function addOneYear(_: undefined, i: number) { return new Date().getFullYear() + i } const fiftyYearsAhead = Array.from({ length: 50 }, addOneYear) export default function DatePickerMobile({ close, handleOnSelect, locales, selectedDate, }: DatePickerProps) { const [selectedYear, setSelectedYear] = useState(() => dt().year()) const lang = useLang() const intl = useIntl() function handleSelectYear(evt: ChangeEvent) { setSelectedYear(Number(evt.currentTarget.value)) } /** English is default language and doesn't need to be imported */ const locale = lang === Lang.en ? undefined : locales[lang] const currentDate = dt().toDate() const startOfCurrentMonth = dt(currentDate).set("date", 1).toDate() const yesterday = dt(currentDate).subtract(1, "day").toDate() const startMonth = dt().set("year", selectedYear).startOf("year").toDate() const decemberOfYear = dt().set("year", selectedYear).endOf("year").toDate() return (
) }, MonthCaption(props) { return (
{props.children}
) }, Root({ children, ...props }) { return (
{children}
) }, }} /> ) }