Feat: add support for day-first and year-first date formats (DD/MM/YYYY, YYYY/MM/DD) #12333

abdulrahmancodes · 2025-05-27T16:53:05Z

Screen.Recording.2025-05-27.at.10.11.23.PM.mov

…ponents

…e handling

…ashes for YEAR_FIRST format

greptile-apps

PR Summary

This PR adds international date format support to the DateTime Picker component, enabling DD/MM/YYYY and YYYY-MM-DD formats alongside the existing MM/DD/YYYY format.

Introduced useDateParser hook in hooks/useDateParser.ts to centralize date parsing logic and format handling
Added dynamic format selection through getDateFormatString in date-utils.ts based on user preferences
Removed hardcoded format constants (DateParserFormat.ts, DateTimeParserFormat.ts) in favor of flexible format system
Improved timezone handling by using Luxon's DateTime for consistent date/time conversions
Updated placeholder text and input validation to reflect user's selected date format

_{12 file(s) reviewed, 7 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-05-27T16:53:39Z

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

    (date: any) => {
-      return parseDateToString({
-        date,
-        isDateTimeInput: isDateTimeInput === true,
-        userTimezone,
-      });
+      return parseToString(date);


style: date parameter is typed as 'any' - should be explicitly typed as Date | null

Suggested change

(date: any) => {

return parseDateToString({

date,

isDateTimeInput: isDateTimeInput === true,

userTimezone,

});

return parseToString(date);

(date: Date | null) => {

return parseToString(date);

greptile-apps · 2025-05-27T16:53:39Z

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

+      default:
+        return `Type date${isDateTimeInput ? ' and time' : ' (mm/dd/yyyy)'}`;
+    }
+  }, [dateFormat, isDateTimeInput]);

  return (
    <StyledInputContainer>
      <StyledInput
        type="text"
        ref={ref as any}


style: Type assertion to 'any' could be replaced with proper typing of the ref

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

greptile-apps · 2025-05-27T16:53:41Z

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

@@ -44,42 +46,38 @@ type DateTimeInputProps = {
  onChange?: (date: Date | null) => void;
  date: Date | null;
  isDateTimeInput?: boolean;
-  userTimezone?: string;
  onError?: (error: Error) => void;


logic: onError prop is defined but never used in the component

greptile-apps · 2025-05-27T16:54:07Z

packages/twenty-front/src/modules/ui/input/components/internal/date/constants/DateTimeMask.ts

 import { TIME_MASK } from '@/ui/input/components/internal/date/constants/TimeMask';
+import { DateFormat } from '~/modules/localization/constants/DateFormat';
+import { getDateMask } from './DateMask';


style: The relative import path for DateFormat ('~/' vs '@/') is inconsistent with the other imports

greptile-apps · 2025-05-27T16:54:13Z

...twenty-front/src/modules/ui/input/components/internal/date/constants/DateTimeParserFormat.ts

style: Consider keeping this file but deprecating the constant with a warning message directing users to getDateFormatString for smoother migration

greptile-apps · 2025-05-27T16:54:37Z

packages/twenty-front/src/modules/ui/input/components/internal/date/utils/parseStringToDate.ts

  userTimezone: string | undefined;
+  dateFormat: DateFormat;


logic: userTimezone is marked as optional but the code doesn't handle undefined case, which could cause runtime errors

Suggested change

userTimezone: string | undefined;

dateFormat: DateFormat;

userTimezone: string;

dateFormat: DateFormat;

…eParseDateToString function

… useCallback

…mapping object for date formats

…ST format

github-actions · 2025-05-27T17:06:28Z

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:21814

This environment will automatically shut down when the PR is closed or after 5 hours.

…ime zone adjustments

…fined dates

…cker components

…useEffect

packages/twenty-front/src/modules/ui/input/components/internal/date/utils/parseDateToString.ts

packages/twenty-front/src/modules/ui/input/components/internal/date/constants/DateTimeMask.ts

packages/twenty-front/src/modules/ui/input/components/internal/hooks/useDateParser.ts

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

packages/twenty-front/src/modules/ui/input/components/internal/date/constants/DateMask.ts

etiennejouan

Hi @abdulrahmancodes, thank you for your nice contribution !

I left few comments and questions.

packages/twenty-front/src/modules/ui/input/components/internal/date/constants/DateMask.ts

…and parseToDate functions

… to streamline date parsing logic.

abdulrahmancodes · 2025-05-28T16:59:04Z

Hey @etiennejouan! Thanks for the review! I’ve addressed all the comments. Could you please take another look when you get a chance?

charlesBochet · 2025-06-02T14:51:50Z

packages/twenty-front/src/modules/ui/input/components/internal/date/constants/DateMask.ts

-export const DATE_MASK = 'm`/d`/Y`'; // See https://imask.js.org/guide.html#masked-date
+import { DateFormat } from '~/modules/localization/constants/DateFormat';
+
+export const getDateMask = (dateFormat: DateFormat): string => {


file should have the same name as utils

charlesBochet · 2025-06-02T14:54:02Z

packages/twenty-front/src/utils/date-utils.ts

@@ -212,3 +214,20 @@ export const formatToHumanReadableDateTime = (date: Date | string) => {
    minute: 'numeric',
  }).format(parsedJSDate);
 };
+
+export const getDateFormatString = (


neat: I'm a bit confused why we have utils here and in ui/input/components/internal/date

Looking at the code, I can see that the utilities in date-utils.ts are actually the core date utilities used throughout the application, while the ones in ui/input/components/internal/date/utils/ are specialized utilities specifically for the date picker component that build on top of the core utilities

etiennejouan

LGTM ! thanks for updating.
@abdulrahmancodes, I let you check Charles comments.

… utility function

abdulrahmancodes added 6 commits May 24, 2025 22:28

add support for YYYY-MM-DD and MM/DD/YYYY date formats

c6a6250

Refactor date parsing in FormDateTimeFieldInput and DateTimeInput com…

81815cb

…ponents

Remove deprecated date parser format constants for consistency in dat…

db3f7a8

…e handling

Update date format in getDateFormatString to use slashes instead of d…

99903b7

…ashes for YEAR_FIRST format

Refactor date mask handling in DateTimeInput component

110b3d1

update parseDateToString to make dateFormat optional

329614d

greptile-apps bot reviewed May 27, 2025

View reviewed changes

abdulrahmancodes added 4 commits May 27, 2025 22:25

Refactor date formatting in DateTimeInput component by inlining handl…

92ccd17

…eParseDateToString function

Refactor getPlaceholder function in DateTimeInput component to remove…

262edcb

… useCallback

Refactor getPlaceholder function in DateTimeInput component to use a …

ad708c4

…mapping object for date formats

Update date format in getDateFormatString to use hyphens for YEAR_FIR…

e2fd07f

…ST format

abdulrahmancodes added 2 commits May 27, 2025 22:38

Refactor parseDateToString to improve date parsing logic and handle t…

8ae30f3

…ime zone adjustments

Enhance parseDateToString function to return an empty string for unde…

ee56638

…fined dates

charlesBochet added the -PR: awaiting review label May 27, 2025

abdulrahmancodes added 5 commits May 28, 2025 12:11

Remove timeZone prop from AbsoluteDatePickerHeader and InternalDatePi…

5ea73b0

…cker components

Update import path for DateFormat in DateTimeMask constants

da570cc

Remove unused onError prop from DateTimeInput component

2f47514

Update date mask format for YEAR_FIRST to use hyphens instead of slashes

d88b10a

Fix eslint warning in DateTimeInput by adjusting dependency array in …

727b692

…useEffect

etiennejouan self-assigned this May 28, 2025

etiennejouan reviewed May 28, 2025

View reviewed changes

packages/twenty-front/src/modules/ui/input/components/internal/date/constants/DateMask.ts Outdated Show resolved Hide resolved

abdulrahmancodes added 4 commits May 28, 2025 22:05

move getDateTimeMask to date/utils folder

2919335

remove unused dateFormat from useDateParser hook

b691749

Refactor useDateParser hook to utilize useCallback for parseToString …

cea73d6

…and parseToDate functions

Remove early return for undefined dates in parseDateToString function…

a919c06

… to streamline date parsing logic.

abdulrahmancodes requested a review from etiennejouan May 28, 2025 16:57

charlesBochet reviewed Jun 2, 2025

View reviewed changes

etiennejouan reviewed Jun 2, 2025

View reviewed changes

abdulrahmancodes added 2 commits June 2, 2025 22:49

Add getDateMask utility function for date format handling

9d81232

Refactor DateTimeInput and getDateTimeMask to use updated getDateMask…

0dcc412

… utility function

abdulrahmancodes force-pushed the feat/new-date-formats branch 3 times, most recently from 29173d0 to 0dcc412 Compare June 2, 2025 19:43

abdulrahmancodes and others added 2 commits June 3, 2025 01:15

Merge branch 'main' into feat/new-date-formats

b6ea032

Remove unused timeZone prop from InternalDatePicker component

156ae94

abdulrahmancodes requested review from charlesBochet and etiennejouan June 2, 2025 20:10

Feat: add support for day-first and year-first date formats (DD/MM/YYYY, YYYY/MM/DD) #12333

Are you sure you want to change the base?

Feat: add support for day-first and year-first date formats (DD/MM/YYYY, YYYY/MM/DD) #12333

Conversation

abdulrahmancodes commented May 27, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

greptile-apps bot May 27, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps bot May 27, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 27, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 27, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 27, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

etiennejouan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

abdulrahmancodes commented May 28, 2025

Uh oh!

charlesBochet Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

charlesBochet Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

abdulrahmancodes Jun 2, 2025

Choose a reason for hiding this comment

Uh oh!

etiennejouan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented May 27, 2025 •

edited

Loading