From b9c3a5576823c65a7dc741340b714d28bbf43ff8 Mon Sep 17 00:00:00 2001
From: Ziyi <ziyi.yuan@strapi.io>
Date: Thu, 5 Sep 2024 10:27:07 +0200
Subject: [PATCH] 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)
---
 .../admin/src/components/GenericInputs.tsx    |  8 +++-
 .../admin/src/utils/parseDateValue.ts         | 14 +++++++
 .../src/utils/tests/parseDateValue.test.ts    | 42 +++++++++++++++++++
 3 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 packages/core/content-type-builder/admin/src/utils/parseDateValue.ts
 create mode 100644 packages/core/content-type-builder/admin/src/utils/tests/parseDateValue.test.ts

diff --git a/packages/core/content-type-builder/admin/src/components/GenericInputs.tsx b/packages/core/content-type-builder/admin/src/components/GenericInputs.tsx
index 087c5d62c5..2443c9e528 100644
--- a/packages/core/content-type-builder/admin/src/components/GenericInputs.tsx
+++ b/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}
           />
         );
       }
diff --git a/packages/core/content-type-builder/admin/src/utils/parseDateValue.ts b/packages/core/content-type-builder/admin/src/utils/parseDateValue.ts
new file mode 100644
index 0000000000..f83509f67f
--- /dev/null
+++ b/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());
diff --git a/packages/core/content-type-builder/admin/src/utils/tests/parseDateValue.test.ts b/packages/core/content-type-builder/admin/src/utils/tests/parseDateValue.test.ts
new file mode 100644
index 0000000000..6c960191b7
--- /dev/null
+++ b/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();
+  });
+});