63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
"use client"
|
|
import { da, de, fi, nb, sv } from "date-fns/locale"
|
|
import { useState } from "react"
|
|
import { type DateRange, DayPicker } from "react-day-picker"
|
|
|
|
import { Lang } from "@/constants/languages"
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import classNames from "react-day-picker/style.module.css"
|
|
|
|
const locales = {
|
|
[Lang.da]: da,
|
|
[Lang.de]: de,
|
|
[Lang.fi]: fi,
|
|
[Lang.no]: nb,
|
|
[Lang.sv]: sv,
|
|
}
|
|
|
|
export interface DatePickerProps {
|
|
handleOnSelect: (selected: DateRange) => void
|
|
initialSelected?: DateRange
|
|
}
|
|
|
|
export default function DatePicker({
|
|
handleOnSelect,
|
|
initialSelected = {
|
|
from: undefined,
|
|
to: undefined,
|
|
},
|
|
}: DatePickerProps) {
|
|
const lang = useLang()
|
|
const [selectedDate, setSelectedDate] = useState<DateRange>(initialSelected)
|
|
|
|
function handleSelectDate(selected: DateRange) {
|
|
handleOnSelect(selected)
|
|
setSelectedDate(selected)
|
|
}
|
|
|
|
/** English is default language and doesn't need to be imported */
|
|
const locale = lang === Lang.en ? undefined : locales[lang]
|
|
|
|
const currentDate = dt().toDate()
|
|
const startOfMonth = dt(currentDate).set("date", 1).toDate()
|
|
const yesterday = dt(currentDate).subtract(1, "day").toDate()
|
|
return (
|
|
<DayPicker
|
|
classNames={classNames}
|
|
disabled={{ from: startOfMonth, to: yesterday }}
|
|
excludeDisabled
|
|
locale={locale}
|
|
mode="range"
|
|
onSelect={handleSelectDate}
|
|
pagedNavigation
|
|
required
|
|
selected={selectedDate}
|
|
showWeekNumber
|
|
startMonth={currentDate}
|
|
/>
|
|
)
|
|
}
|