Fix date picker wrong on certain timezones (#5972)

Timezone with a negative offset weren't working good with date pickers.

I split the logic for display and parsing between date only and
datetime.

Date time is sending and displaying using timezone, and date only is
sending and displaying by forcing the date to take its UTC day and month
and 00:00:00 time.

This way its consistent across all timezones.

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx

@@ -57,11 +57,25 @@ export const DateTimeInput = ({
     (date: any) => {
       const dateParsed = DateTime.fromJSDate(date);
 
-      const formattedDate = dateParsed.toFormat(parsingFormat);
+      const dateWithoutTime = DateTime.fromJSDate(date)
+        .toLocal()
+        .set({
+          day: date.getUTCDate(),
+          month: date.getUTCMonth() + 1,
+          year: date.getUTCFullYear(),
+          hour: 0,
+          minute: 0,
+          second: 0,
+          millisecond: 0,
+        });
+
+      const formattedDate = isDateTimeInput
+        ? dateParsed.toFormat(parsingFormat)
+        : dateWithoutTime.toFormat(parsingFormat);
 
       return formattedDate;
     },
-    [parsingFormat],
+    [parsingFormat, isDateTimeInput],
   );
 
   const parseStringToDate = (str: string) => {

packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx

@@ -383,19 +383,35 @@ export const InternalDatePicker = ({
     onChange?.(newDate);
   };
 
+  const dateWithoutTime = DateTime.fromJSDate(date)
+    .toLocal()
+    .set({
+      day: date.getUTCDate(),
+      month: date.getUTCMonth() + 1,
+      year: date.getUTCFullYear(),
+      hour: 0,
+      minute: 0,
+      second: 0,
+      millisecond: 0,
+    })
+    .toJSDate();
+
+  const dateToUse = isDateTimeInput ? date : dateWithoutTime;
+
   return (
     <StyledContainer onKeyDown={handleKeyDown}>
       <div className={clearable ? 'clearable ' : ''}>
         <ReactDatePicker
           open={true}
-          selected={internalDate}
-          openToDate={internalDate}
+          selected={dateToUse}
+          openToDate={dateToUse}
+          disabledKeyboardNavigation
           onChange={(newDate) => {
             onChange?.(newDate);
           }}
           customInput={
             <DateTimeInput
-              date={internalDate}
+              date={dateToUse}
               isDateTimeInput={isDateTimeInput}
               onChange={onChange}
             />
@@ -424,13 +440,13 @@ export const InternalDatePicker = ({
                   options={months}
                   disableBlur
                   onChange={handleChangeMonth}
-                  value={date.getMonth()}
+                  value={date.getUTCMonth()}
                   fullWidth
                 />
                 <Select
                   dropdownId={MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID}
                   onChange={handleChangeYear}
-                  value={date.getFullYear()}
+                  value={date.getUTCFullYear()}
                   options={years}
                   disableBlur
                   fullWidth
@@ -450,16 +466,24 @@ export const InternalDatePicker = ({
               </StyledCustomDatePickerHeader>
             </>
           )}
-          onSelect={(date: Date, event) => {
-            const dateUTC = DateTime.fromJSDate(date, {
-              zone: 'utc',
-            }).toJSDate();
+          onSelect={(date: Date) => {
+            const dateParsedWithoutTime = DateTime.fromObject(
+              {
+                day: date.getDate(),
+                month: date.getMonth() + 1,
+                year: date.getFullYear(),
+                hour: 0,
+                minute: 0,
+                second: 0,
+              },
+              { zone: 'utc' },
+            ).toJSDate();
 
-            if (event?.type === 'click') {
-              handleMouseSelect?.(dateUTC);
-            } else {
-              onChange?.(dateUTC);
-            }
+            const dateForUpdate = isDateTimeInput
+              ? date
+              : dateParsedWithoutTime;
+
+            handleMouseSelect?.(dateForUpdate);
           }}
         />
       </div>