Date picker for Date and DateTime field input (#4981)

- Implemented correct mask for Date and DateTime field in
InternalDatePicker
- Use only keyDown event and click outside in InternalDatePicker and
DateInput
- Refactored InternalDatePicker UI to have month and year displayed
- Fixed bug and synchronized date value between the different inputs
that can change it

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx

@@ -106,12 +106,14 @@ export const FieldInput = ({
           onEnter={onEnter}
           onEscape={onEscape}
           onClickOutside={onClickOutside}
+          onClear={onSubmit}
         />
       ) : isFieldDate(fieldDefinition) ? (
         <DateFieldInput
           onEnter={onEnter}
           onEscape={onEscape}
           onClickOutside={onClickOutside}
+          onClear={onSubmit}
         />
       ) : isFieldNumber(fieldDefinition) ? (
         <NumberFieldInput

packages/twenty-front/src/modules/object-record/record-field/hooks/useIsFieldClearable.ts

@@ -1,7 +1,5 @@
 import { useContext } from 'react';
 
-import { isFieldDateTime } from '@/object-record/record-field/types/guards/isFieldDateTime';
-
 import { FieldContext } from '../contexts/FieldContext';
 
 // TODO: have a better clearable settings in metadata ?
@@ -9,13 +7,9 @@ import { FieldContext } from '../contexts/FieldContext';
 // Instead of passing it in the context
 // See: https://github.com/twentyhq/twenty/issues/4403
 export const useIsFieldClearable = (): boolean => {
-  const { clearable, isLabelIdentifier, fieldDefinition } =
-    useContext(FieldContext);
+  const { clearable, isLabelIdentifier } = useContext(FieldContext);
 
-  const isDateField = isFieldDateTime(fieldDefinition);
-
-  const fieldCanBeCleared =
-    !isLabelIdentifier && !isDateField && clearable !== false;
+  const fieldCanBeCleared = !isLabelIdentifier && clearable !== false;
 
   return fieldCanBeCleared;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/DateTimeFieldDisplay.tsx

@@ -1,9 +1,9 @@
-import { DateDisplay } from '@/ui/field/display/components/DateDisplay';
+import { DateTimeDisplay } from '@/ui/field/display/components/DateTimeDisplay';
 
 import { useDateTimeField } from '../../hooks/useDateTimeField';
 
 export const DateTimeFieldDisplay = () => {
   const { fieldValue } = useDateTimeField();
 
-  return <DateDisplay value={fieldValue} />;
+  return <DateTimeDisplay value={fieldValue} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx

@@ -2,6 +2,7 @@ import { Nullable } from 'twenty-ui';
 
 import { useDateField } from '@/object-record/record-field/meta-types/hooks/useDateField';
 import { DateInput } from '@/ui/field/input/components/DateInput';
+import { isDefined } from '~/utils/isDefined';
 
 import { usePersistField } from '../../../hooks/usePersistField';
 
@@ -11,19 +12,21 @@ export type DateFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
+  onClear?: FieldInputEvent;
 };
 
 export const DateFieldInput = ({
   onEnter,
   onEscape,
   onClickOutside,
+  onClear,
 }: DateFieldInputProps) => {
-  const { fieldValue, hotkeyScope, setDraftValue } = useDateField();
+  const { fieldValue, setDraftValue } = useDateField();
 
   const persistField = usePersistField();
 
   const persistDate = (newDate: Nullable<Date>) => {
-    if (!newDate) {
+    if (!isDefined(newDate)) {
       persistField(null);
     } else {
       const newDateISO = newDate?.toISOString();
@@ -51,17 +54,21 @@ export const DateFieldInput = ({
     setDraftValue(newDate?.toDateString() ?? '');
   };
 
+  const handleClear = () => {
+    onClear?.(() => persistDate(null));
+  };
+
   const dateValue = fieldValue ? new Date(fieldValue) : null;
 
   return (
     <DateInput
-      hotkeyScope={hotkeyScope}
       onClickOutside={handleClickOutside}
       onEnter={handleEnter}
       onEscape={handleEscape}
       value={dateValue}
       clearable
       onChange={handleChange}
+      onClear={handleClear}
     />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx

@@ -11,15 +11,16 @@ export type DateTimeFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
+  onClear?: FieldInputEvent;
 };
 
 export const DateTimeFieldInput = ({
   onEnter,
   onEscape,
   onClickOutside,
+  onClear,
 }: DateTimeFieldInputProps) => {
-  const { fieldValue, hotkeyScope, clearable, setDraftValue } =
-    useDateTimeField();
+  const { fieldValue, setDraftValue } = useDateTimeField();
 
   const persistField = usePersistField();
 
@@ -52,18 +53,22 @@ export const DateTimeFieldInput = ({
     setDraftValue(newDate?.toDateString() ?? '');
   };
 
+  const handleClear = () => {
+    onClear?.(() => persistDate(null));
+  };
+
   const dateValue = fieldValue ? new Date(fieldValue) : null;
 
   return (
     <DateInput
-      hotkeyScope={hotkeyScope}
       onClickOutside={handleClickOutside}
       onEnter={handleEnter}
       onEscape={handleEscape}
       value={dateValue}
-      clearable={clearable}
+      clearable
       onChange={handleChange}
       isDateTimeInput
+      onClear={handleClear}
     />
   );
 };