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

Closes #12152 



https://github.com/user-attachments/assets/53640777-578f-4de8-a1f8-52d409a7582d

---------

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>
This commit is contained in:
Abdul Rahman
2025-06-03 17:42:01 +05:30
committed by GitHub
parent 70cc3e75fe
commit 278a7baf5e
14 changed files with 125 additions and 114 deletions

View File

@ -11,23 +11,14 @@ import {
} from '@/ui/input/components/internal/date/components/InternalDatePicker';
import { MAX_DATE } from '@/ui/input/components/internal/date/constants/MaxDate';
import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate';
import { parseDateToString } from '@/ui/input/components/internal/date/utils/parseDateToString';
import { parseStringToDate } from '@/ui/input/components/internal/date/utils/parseStringToDate';
import { useDateParser } from '@/ui/input/components/internal/hooks/useDateParser';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { UserContext } from '@/users/contexts/UserContext';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import {
ChangeEvent,
KeyboardEvent,
useContext,
useId,
useRef,
useState,
} from 'react';
import { ChangeEvent, KeyboardEvent, useId, useRef, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
import { Nullable } from 'twenty-ui/utilities';
@ -93,7 +84,9 @@ export const FormDateTimeFieldInput = ({
readonly,
placeholder,
}: FormDateTimeFieldInputProps) => {
const { timeZone } = useContext(UserContext);
const { parseToString, parseToDate } = useDateParser({
isDateTimeInput: !dateOnly,
});
const inputId = useId();
@ -121,11 +114,7 @@ export const FormDateTimeFieldInput = ({
const [inputDateTime, setInputDateTime] = useState(
isDefined(draftValueAsDate) && !isStandaloneVariableString(defaultValue)
? parseDateToString({
date: draftValueAsDate,
isDateTimeInput: !dateOnly,
userTimezone: timeZone,
})
? parseToString(draftValueAsDate)
: '',
);
@ -172,15 +161,7 @@ export const FormDateTimeFieldInput = ({
value: newDate?.toDateString() ?? null,
});
setInputDateTime(
isDefined(newDate)
? parseDateToString({
date: newDate,
isDateTimeInput: !dateOnly,
userTimezone: timeZone,
})
: '',
);
setInputDateTime(isDefined(newDate) ? parseToString(newDate) : '');
setPickerDate(newDate);
@ -230,15 +211,7 @@ export const FormDateTimeFieldInput = ({
setPickerDate(newDate);
setInputDateTime(
isDefined(newDate)
? parseDateToString({
date: newDate,
isDateTimeInput: !dateOnly,
userTimezone: timeZone,
})
: '',
);
setInputDateTime(isDefined(newDate) ? parseToString(newDate) : '');
persistDate(newDate);
};
@ -264,15 +237,10 @@ export const FormDateTimeFieldInput = ({
if (inputDateTimeTrimmed === '') {
handlePickerClear();
return;
}
const parsedInputDateTime = parseStringToDate({
dateAsString: inputDateTimeTrimmed,
isDateTimeInput: !dateOnly,
userTimezone: timeZone,
});
const parsedInputDateTime = parseToDate(inputDateTimeTrimmed);
if (!isDefined(parsedInputDateTime)) {
return;
@ -293,13 +261,7 @@ export const FormDateTimeFieldInput = ({
setPickerDate(validatedDate);
setInputDateTime(
parseDateToString({
date: validatedDate,
isDateTimeInput: !dateOnly,
userTimezone: timeZone,
}),
);
setInputDateTime(parseToString(validatedDate));
persistDate(validatedDate);
};