feat: add initial datepicker, no ui/ux

components/DatePicker/DatePicker.tsx

@@ -0,0 +1,62 @@
+"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}
+    />
+  )
+}