mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Date field format display (#11384)

Browse Source 
## Introduction

This PR enables functionality discussed in [Layout Date
Formatting](https://github.com/twentyhq/core-team-issues/issues/97).

### TLDR;
It enables greater control of date formatting at the object's field
level by upgrading all DATE and DATE_TIME fields' settings from:

```ts
{
    displayAsRelativeDate: boolean
}
```

to:

```ts

type FieldDateDisplayFormat = 'full_date' | 'relative_date' | 'date' | 'time' | 'year' | 'custom'

{
    displayFormat: FieldDateDisplayFormat
}
```

PR also includes an upgrade command that will update any existing DATE
and DATE_TIME fields to the new settings value

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
oliver
2025-04-18 01:00:02 -06:00
committed by GitHub
parent dd0ea2366f
commit 53042cc9dc
33 changed files with 690 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/twenty-front/src/utils/string/formatDateTimeString.ts
View File

@ -1,26 +1,52 @@
import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { formatDateISOStringToCustomUnicodeFormat } from '@/localization/utils/formatDateISOStringToCustomUnicodeFormat';
import { formatDateISOStringToDateTime } from '@/localization/utils/formatDateISOStringToDateTime';
import { formatDateISOStringToRelativeDate } from '@/localization/utils/formatDateISOStringToRelativeDate';
import {
FieldDateDisplayFormat,
FieldDateMetadataSettings,
} from '@/object-record/record-field/types/FieldMetadata';
export const formatDateTimeString = ({
value,
timeZone,
dateFormat,
timeFormat,
displayAsRelativeDate,
dateFieldSettings,
}: {
timeZone: string;
dateFormat: DateFormat;
timeFormat: TimeFormat;
value?: string | null;
displayAsRelativeDate?: boolean;
dateFieldSettings?: FieldDateMetadataSettings;
}) => {
const formattedDate = value
? displayAsRelativeDate
? formatDateISOStringToRelativeDate(value)
: formatDateISOStringToDateTime(value, timeZone, dateFormat, timeFormat)
: '';
if (!value) {
return '';
}
return formattedDate;
switch (dateFieldSettings?.displayFormat) {
case FieldDateDisplayFormat.RELATIVE:
return formatDateISOStringToRelativeDate(value);
case FieldDateDisplayFormat.USER_SETTINGS:
return formatDateISOStringToDateTime(
value,
timeZone,
dateFormat,
timeFormat,
);
case FieldDateDisplayFormat.CUSTOM:
return formatDateISOStringToCustomUnicodeFormat(
value,
timeZone,
dateFieldSettings.customUnicodeDateFormat,
);
default:
return formatDateISOStringToDateTime(
value,
timeZone,
dateFormat,
timeFormat,
);
}
};