fix: fix default date value bug in content type builder(#21098) (#21140)

* fix: fix default date value bug in content type builder(#21098)

* fix: fix default date value bug in content type builder(#21098), refactor parseDateValue

* fix: fix default date value bug in content type builder(#21098), refactor parseDateValue

* fix: fix default date value bug in content type builder(#21098)

packages/core/content-type-builder/admin/src/components/GenericInputs.tsx

@@ -25,6 +25,8 @@ import formatISO from 'date-fns/formatISO';
 import isEqual from 'lodash/isEqual';
 import { type MessageDescriptor, type PrimitiveType, useIntl } from 'react-intl';
 
+import { parseDateValue } from '../utils/parseDateValue';
+
 import type { Schema } from '@strapi/types';
 
 interface TranslationMessage extends MessageDescriptor {
@@ -266,6 +268,7 @@ const GenericInput = ({
         );
       }
       case 'datetime': {
+        const dateValue = parseDateValue(value);
         return (
           <DateTimePicker
             clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
@@ -278,11 +281,12 @@ const GenericInput = ({
             }}
             onClear={() => onChange({ target: { name, value: null, type } })}
             placeholder={formattedPlaceholder}
-            value={value}
+            value={dateValue}
           />
         );
       }
       case 'date': {
+        const dateValue = parseDateValue(value);
         return (
           <DatePicker
             clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
@@ -298,7 +302,7 @@ const GenericInput = ({
             }}
             onClear={() => onChange({ target: { name, value: null, type } })}
             placeholder={formattedPlaceholder}
-            value={value}
+            value={dateValue}
           />
         );
       }

packages/core/content-type-builder/admin/src/utils/parseDateValue.ts

@@ -0,0 +1,14 @@
+export const parseDateValue = (value: unknown): Date | undefined => {
+  if (value instanceof Date && isValidDate(value)) {
+    return value;
+  }
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    const date = new Date(value);
+    if (isValidDate(date)) {
+      return date;
+    }
+  }
+};
+
+const isValidDate = (date: Date): boolean => !isNaN(date.getTime());

packages/core/content-type-builder/admin/src/utils/tests/parseDateValue.test.ts

@@ -0,0 +1,42 @@
+import { parseDateValue } from '../parseDateValue';
+
+describe('parseDateValue', () => {
+  it('should return undefined for null, undefined', () => {
+    expect(parseDateValue(null)).toBeUndefined();
+    expect(parseDateValue(undefined)).toBeUndefined();
+  });
+
+  it('should return a valid Date object for Date input', () => {
+    const testDate = new Date('2024-09-04');
+    expect(parseDateValue(testDate)).toEqual(testDate);
+  });
+
+  it('should return undefined for invalid Date object', () => {
+    expect(parseDateValue(new Date('Invalid Date'))).toBeUndefined();
+  });
+
+  it('should return a Date object for valid string date input', () => {
+    const result = parseDateValue('2024-09-04');
+    expect(result).toBeInstanceOf(Date);
+    expect(result?.toISOString()).toBe('2024-09-04T00:00:00.000Z');
+  });
+
+  it('should return a Date object for valid number (timestamp) input', () => {
+    const timestamp = 1725433710049;
+    const result = parseDateValue(timestamp);
+    expect(result).toBeInstanceOf(Date);
+    expect(result?.toISOString()).toBe('2024-09-04T07:08:30.049Z');
+  });
+
+  it('should return undefined for invalid string date', () => {
+    expect(parseDateValue('not-a-date')).toBeUndefined();
+  });
+
+  it('should return undefined for invalid number date', () => {
+    expect(parseDateValue(NaN)).toBeUndefined();
+  });
+
+  it('should return undefined for unexpected types', () => {
+    expect(parseDateValue({} as any)).toBeUndefined();
+  });
+});