From 94815bca5c79152c9c9e7149c7fc11ce0459d1aa Mon Sep 17 00:00:00 2001
From: Hakan Shehu <hakanshehu15@gmail.com>
Date: Thu, 23 Oct 2025 11:28:24 +0200
Subject: [PATCH] Fix date picker date conversion (#243)

---
 packages/core/src/lib/utils.ts                |  7 ------
 .../calendars/calendar-view-grid.tsx          |  3 +--
 packages/ui/src/components/ui/date-picker.tsx | 25 ++++++++++++++++---
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/lib/utils.ts b/packages/core/src/lib/utils.ts
index 3bc9753c..c61a50c6 100644
--- a/packages/core/src/lib/utils.ts
+++ b/packages/core/src/lib/utils.ts
@@ -95,13 +95,6 @@ export const isSameDay = (
   return d1.getDate() === d2.getDate() && d1.getMonth() === d2.getMonth();
 };
 
-export const toUTCDate = (dateParam: Date | string): Date => {
-  const date = typeof dateParam === 'string' ? new Date(dateParam) : dateParam;
-  return new Date(
-    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
-  );
-};
-
 export const isStringArray = (
   value: unknown | null | undefined
 ): value is string[] => {
diff --git a/packages/ui/src/components/databases/calendars/calendar-view-grid.tsx b/packages/ui/src/components/databases/calendars/calendar-view-grid.tsx
index feffd388..f1bdc209 100644
--- a/packages/ui/src/components/databases/calendars/calendar-view-grid.tsx
+++ b/packages/ui/src/components/databases/calendars/calendar-view-grid.tsx
@@ -5,7 +5,6 @@ import { DayPicker, DayProps, getDefaultClassNames } from 'react-day-picker';
 import {
   FieldAttributes,
   isSameDay,
-  toUTCDate,
   DatabaseViewFilterAttributes,
 } from '@colanode/core';
 import { CalendarViewDay } from '@colanode/ui/components/databases/calendars/calendar-view-day';
@@ -184,7 +183,7 @@ export const CalendarViewGrid = ({ field }: CalendarViewGridProps) => {
 
           return (
             <CalendarViewDay
-              date={toUTCDate(props.day.date)}
+              date={props.day.date}
               records={dayRecords}
               onCreate={onCreate}
               isOutside={props.day.outside}
diff --git a/packages/ui/src/components/ui/date-picker.tsx b/packages/ui/src/components/ui/date-picker.tsx
index 97edd3cb..6ce8f0aa 100644
--- a/packages/ui/src/components/ui/date-picker.tsx
+++ b/packages/ui/src/components/ui/date-picker.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
 
-import { toUTCDate } from '@colanode/core';
 import { Calendar } from '@colanode/ui/components/ui/calendar';
 import {
   Popover,
@@ -17,6 +16,26 @@ interface DatePickerProps {
   readonly?: boolean;
 }
 
+const toUTCDate = (dateParam: Date | string): Date => {
+  const date = typeof dateParam === 'string' ? new Date(dateParam) : dateParam;
+
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+
+  return new Date(Date.UTC(year, month, day, 0, 0, 0, 0));
+};
+
+const fromUTCDate = (dateParam: Date | string): Date => {
+  const date = typeof dateParam === 'string' ? new Date(dateParam) : dateParam;
+
+  const year = date.getUTCFullYear();
+  const month = date.getUTCMonth();
+  const day = date.getUTCDate();
+
+  return new Date(year, month, day, 0, 0, 0, 0);
+};
+
 export const DatePicker = ({
   value,
   className,
@@ -25,7 +44,7 @@ export const DatePicker = ({
   readonly,
 }: DatePickerProps) => {
   const [open, setOpen] = useState(false);
-  const dateObj = value ? new Date(value) : undefined;
+  const dateObj = value ? fromUTCDate(value) : undefined;
   const placeHolderText = placeholder ?? '';
 
   if (readonly) {
@@ -58,7 +77,7 @@ export const DatePicker = ({
               onChange(toUTCDate(date));
             }
           }}
-          initialFocus
+          autoFocus={true}
         />
       </PopoverContent>
     </Popover>