From c80dd927107e2810c1110f24d5994e886da6a912 Mon Sep 17 00:00:00 2001
From: ClaraTschamon <clara.tschamon@gmail.com>
Date: Wed, 10 Dec 2025 14:57:04 +0100
Subject: [PATCH] fix: datepicker

---
 package-lock.json                        | 54 ++++++++++++++----------
 package.json                             |  1 +
 src/components/DatePicker/DatePicker.tsx | 34 ++++++++++-----
 3 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 60bd12e..2d0879f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@emotion/styled": "^11",
         "@phosphor-icons/react": "^2.1.0",
         "@reactuses/core": "^6.1.6",
+        "date-fns-tz": "^3.0.0",
         "framer-motion": "^12",
         "markdown-to-jsx": "^7.1.6",
         "next-themes": "^0.4.6",
@@ -5299,6 +5300,23 @@
         "react-popper": "^2.2.5"
       }
     },
+    "node_modules/@types/react-datepicker/node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.3.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
@@ -8969,20 +8987,22 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-      "dev": true,
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
       "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0"
-      },
-      "engines": {
-        "node": ">=0.11"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/date-fns"
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz",
+      "integrity": "sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "date-fns": "^3.0.0 || ^4.0.0"
       }
     },
     "node_modules/debug": {
@@ -17953,16 +17973,6 @@
         }
       }
     },
-    "node_modules/react-datepicker/node_modules/date-fns": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
-      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
-      }
-    },
     "node_modules/react-docgen": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-7.1.1.tgz",
diff --git a/package.json b/package.json
index ea7a3c8..051f997 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
     "@emotion/styled": "^11",
     "@phosphor-icons/react": "^2.1.0",
     "@reactuses/core": "^6.1.6",
+    "date-fns-tz": "^3.0.0",
     "framer-motion": "^12",
     "markdown-to-jsx": "^7.1.6",
     "next-themes": "^0.4.6",
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 8e6c895..01287e1 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -11,14 +11,30 @@ import {
 } from '@chakra-ui/react';
 import { CalendarBlankIcon, CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react';
 import React, { forwardRef, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import ReactDatePicker, { registerLocale } from 'react-datepicker';
-import de from 'date-fns/locale/de';
-import enUS from 'date-fns/locale/en-US';
-import fr from 'date-fns/locale/fr';
+import * as ReactDatePickerModule from 'react-datepicker';
+import type { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
+import { de, enUS, fr } from 'date-fns/locale';
 import datePickerStyle from './styles';
 import { dateFormat, months } from './constants';
 import { Global } from '@emotion/react';
 
+const DatePickerModule = ReactDatePickerModule as any;
+const DatePickerComponent = DatePickerModule.default || DatePickerModule;
+const registerLocale =
+  DatePickerModule.registerLocale ||
+  DatePickerModule.default?.registerLocale ||
+  DatePickerComponent.registerLocale;
+
+if (registerLocale && typeof registerLocale === 'function') {
+  try {
+    registerLocale('de', de);
+    registerLocale('en', enUS);
+    registerLocale('fr', fr);
+  } catch (error) {
+    console.error('Failed to register locales:', error);
+  }
+}
+
 export interface DatePickerProps
   extends Omit<InputGroupProps, 'onChange' | 'onSelect' | 'children' | 'size'> {
   yearRange?: { start: number; end: number };
@@ -44,7 +60,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   size,
   ...inputGroupProps
 }: DatePickerProps) => {
-  const datePickerRef = useRef<ReactDatePicker>(null);
+  const datePickerRef = useRef<typeof DatePickerComponent>(null);
 
   const addonRef = useRef<HTMLDivElement>(null);
   const [addonWidth, setAddonWidth] = useState(0);
@@ -118,14 +134,10 @@ export const DatePicker: React.FC<DatePickerProps> = ({
     [yearRange]
   );
 
-  registerLocale('de', de);
-  registerLocale('en', enUS);
-  registerLocale('fr', fr);
-
   return (
     <>
       <Global styles={datePickerStyle} />
-      <ReactDatePicker
+      <DatePickerComponent
         ref={datePickerRef}
         renderCustomHeader={({
           date,
@@ -135,7 +147,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
           increaseMonth,
           prevMonthButtonDisabled,
           nextMonthButtonDisabled,
-        }) => (
+        }: ReactDatePickerCustomHeaderProps) => (
           <Flex margin="2" justifyContent="center">
             <IconButton
               aria-label="caret-left"