Fix timezone display + translate dates (#12147)
Fixes https://github.com/twentyhq/twenty/issues/11566 + translates dates - Date display bug: We had an issue with date (not date time) display depending on the timezone the user had selected. The date is stored in the db as yyyy-mm-dd, eg. 2025-05-01 for **May 1st, 2025**. When returned this date is formatted in a UTC DateTime at midnight, so 2025-05-1 00:00:00. Then when displaying the date we were converting this date using the timeZone, so 2025-04-30 17:00:00, thus displaying **April 30th, 2025**. The fix chosen is that we should not take into account the timezone for date (not date time!) displays as we always want to show the same date. - Date translation: dates were not translated, not in their default display (_May 1st, 2025_) nor in their relative display (_about a month ago_). The lib we use for date formatting, date-fns, offers a translation option with pre-built `Locale`s from their lib. Unfortunately and surprisingly we cannot just use directly string locale codes (like `fr-FR`), cf [open issue on date-fns](https://github.com/date-fns/date-fns/issues/3660). A util was introduced to offset this by dynamically importing the right date-fns Locale based on the locale code.
This commit is contained in:
@@ -7,6 +7,7 @@ import {
|
||||
FieldDateDisplayFormat,
|
||||
FieldDateMetadataSettings,
|
||||
} from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { Locale } from 'date-fns';
|
||||
|
||||
export const formatDateTimeString = ({
|
||||
value,
|
||||
@@ -14,12 +15,14 @@ export const formatDateTimeString = ({
|
||||
dateFormat,
|
||||
timeFormat,
|
||||
dateFieldSettings,
|
||||
localeCatalog,
|
||||
}: {
|
||||
timeZone: string;
|
||||
dateFormat: DateFormat;
|
||||
timeFormat: TimeFormat;
|
||||
value?: string | null;
|
||||
dateFieldSettings?: FieldDateMetadataSettings;
|
||||
localeCatalog: Locale;
|
||||
}) => {
|
||||
if (!value) {
|
||||
return '';
|
||||
@@ -27,26 +30,32 @@ export const formatDateTimeString = ({
|
||||
|
||||
switch (dateFieldSettings?.displayFormat) {
|
||||
case FieldDateDisplayFormat.RELATIVE:
|
||||
return formatDateISOStringToRelativeDate(value);
|
||||
return formatDateISOStringToRelativeDate({
|
||||
isoDate: value,
|
||||
localeCatalog: localeCatalog,
|
||||
});
|
||||
case FieldDateDisplayFormat.USER_SETTINGS:
|
||||
return formatDateISOStringToDateTime(
|
||||
value,
|
||||
return formatDateISOStringToDateTime({
|
||||
date: value,
|
||||
timeZone,
|
||||
dateFormat,
|
||||
timeFormat,
|
||||
);
|
||||
localeCatalog,
|
||||
});
|
||||
case FieldDateDisplayFormat.CUSTOM:
|
||||
return formatDateISOStringToCustomUnicodeFormat(
|
||||
value,
|
||||
return formatDateISOStringToCustomUnicodeFormat({
|
||||
date: value,
|
||||
timeZone,
|
||||
dateFieldSettings.customUnicodeDateFormat,
|
||||
);
|
||||
dateFormat: dateFieldSettings.customUnicodeDateFormat,
|
||||
localeCatalog,
|
||||
});
|
||||
default:
|
||||
return formatDateISOStringToDateTime(
|
||||
value,
|
||||
return formatDateISOStringToDateTime({
|
||||
date: value,
|
||||
timeZone,
|
||||
dateFormat,
|
||||
timeFormat,
|
||||
);
|
||||
localeCatalog,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user