Merge pull request #38 from a-ui/bugfix/date-fns-tz

🐛 Introduced timezones to the calendar, so the correct date is always…

Author: NicolasYapla

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 7.10.1 - 2025-09-01
+
+### Fixed
+
+- Introduced timezones to the calendar, so the correct date is always returned no matter which timezone you are in
+
 ## 7.10.0 - 2025-07-24
 
 ### Added

documentation/playground/src/molecules/DatepickerExamples.tsx

@@ -34,6 +34,7 @@ export function DatepickerExamples() {
           label="Without value (format dd/mm/yyyy)"
           required
           inputProps={{ id: 'aui-datepicker-1' }}
+          onChange={v => console.log(v)}
           calendarProps={{
             unavailable: [new Date(Date.now()).toISOString()],
             unavailableTo: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
@@ -80,7 +81,7 @@ export function DatepickerExamples() {
             return 'IT DOES NOT CONTAIN 00/00';
           }}
           value={'THIS IS NOT A DATE!'}
-          inputProps={{ id: 'aui-datepicker-1', state: 'success' }}
+          inputProps={{ id: 'aui-datepicker-2', state: 'success' }}
           calendarProps={{
             unavailable: [new Date(Date.now()).toISOString()],
             unavailableTo: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),

package.json

@@ -17,11 +17,12 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@date-fns/tz": "^1.4.1",
     "@storybook/client-api": "^7.2.1",
     "@swc-node/register": "^1.5.5",
     "@swc/core": "^1.3.32",
     "@types/react-modal": "^3.13.1",
-    "date-fns": "^2.29.3",
+    "date-fns": "^4.1.0",
     "husky": "^8.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -37,7 +38,7 @@
     "@nrwl/vite": "15.8.7",
     "@nrwl/workspace": "15.8.7",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "^16.3.0",
     "@types/jsdom": "^20.0.1",
     "@types/node": "18.11.9",
     "@typescript-eslint/eslint-plugin": "^5.36.1",

packages/antwerp-ui/react-components/src/constants/settings.ts

@@ -16,6 +16,7 @@ export const SORT_DESCENDING = 'descending';
 
 // DATES
 export const DEFAULT_DATE_FORMAT = 'dd/MM/yyyy';
+export const TIMEZONE = 'Europe/Brussels';
 
 // LOCALES
 export const DEFAULT_LOCALE = nlBE;

packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Calendar.tsx

@@ -9,7 +9,7 @@ import { Icon } from '../../base/icon';
 import { MonthsView } from './views/MonthsView';
 import { YearsView } from './views/YearsView';
 import { titleize } from '../../../utils/string.utils';
-import { formatWithFallback } from '../../../utils/time.utils';
+import { formatWithFallback, toUtcMidnightInBrussels } from '../../../utils/time.utils';
 
 export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
   (
@@ -144,7 +144,10 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
     const handleChange = (value: Date) => {
       if (activeView === CalendarView.DAYS) {
         setActiveDate(value);
-        return onChange && onChange(formatISO(value));
+        const year = value.getFullYear();
+        const month = value.getMonth();
+        const day = value.getDate();
+        return onChange && onChange(toUtcMidnightInBrussels(year, month, day));
       } else if (activeView === CalendarView.MONTHS) {
         setActiveMonth(getMonth(value));
         return setActiveView(CalendarView.DAYS);

packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Datepicker.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { DatepickerProps } from './Datepicker.types';
 import { DEFAULT_DATE_FORMAT } from '../../../constants/settings';
-import { formatISO } from 'date-fns';
 import { Icon } from '../../base/icon';
-import { isValid as fnsIsValid, format as fnsFormat, parse as fnsParse } from 'date-fns';
+import { isValid as fnsIsValid, format as fnsFormat, parse as fnsParse, formatISO } from 'date-fns';
 import { renderDescription, renderLabel } from '../../atoms/input/input.renders';
 import { TextField } from '../../atoms/input';
 import { useOutsideClick } from '../../../utils/custom.hooks';

packages/antwerp-ui/react-components/src/utils/time.utils.ts

@@ -1,4 +1,6 @@
 import { isAfter, isBefore, isSameDay, format, Locale } from 'date-fns';
+import { tz } from '@date-fns/tz';
+import { TIMEZONE } from '../constants/settings';
 
 export function isInRange(date: Date, from?: string, to?: string, list?: string[]): boolean {
   return (
@@ -27,3 +29,9 @@ export function formatWithFallback(date: Date, dateFormat: string, locale?: Loca
     return fallback;
   }
 }
+
+export function toUtcMidnightInBrussels(year: number, month: number, day: number): string {
+  const brusselsDate = tz(TIMEZONE)(new Date(Date.UTC(year, month, day, 0, 0, 0)));
+  const brusselsISODate = brusselsDate.toISOString();
+  return brusselsISODate;
+}