53042cc9dc
## 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>
28 lines
804 B
TypeScript
28 lines
804 B
TypeScript
import { FieldDateMetadataSettings } from '@/object-record/record-field/types/FieldMetadata';
|
|
import { UserContext } from '@/users/contexts/UserContext';
|
|
import { useContext } from 'react';
|
|
import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
|
|
import { EllipsisDisplay } from './EllipsisDisplay';
|
|
|
|
type DateTimeDisplayProps = {
|
|
value: string | null | undefined;
|
|
dateFieldSettings?: FieldDateMetadataSettings;
|
|
};
|
|
|
|
export const DateTimeDisplay = ({
|
|
value,
|
|
dateFieldSettings,
|
|
}: DateTimeDisplayProps) => {
|
|
const { dateFormat, timeFormat, timeZone } = useContext(UserContext);
|
|
|
|
const formattedDate = formatDateTimeString({
|
|
value,
|
|
timeZone,
|
|
dateFormat,
|
|
timeFormat,
|
|
dateFieldSettings,
|
|
});
|
|
|
|
return <EllipsisDisplay>{formattedDate}</EllipsisDisplay>;
|
|
};
|