fix: fixed DatePicker NaN bug #1846

cypress/e2e/datePicker.spec.js

@@ -816,4 +816,16 @@ describe('DatePicker', () => {
         cy.get('button').contains('确定').trigger('click');
         cy.get('.semi-input').eq(1).should('have.value', '');
     });
+
+    it('test DatePicker props value is NaN', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=datepicker--fixed-na-n&viewMode=story');
+        cy.get('.semi-input').eq(0).should('have.value', '');
+        cy.get('.semi-input').eq(1).should('have.value', '');
+        cy.get('.semi-input').eq(0).click();
+        cy.get('.semi-datepicker-day').contains('15').trigger('click');
+        cy.get('.semi-datepicker-day').contains('15').trigger('click');
+        cy.get('.semi-button').contains('set NaN').click();
+        cy.get('.semi-input').eq(0).should('have.value', '');
+        cy.get('.semi-input').eq(1).should('have.value', '');
+    });
 });

packages/semi-foundation/datePicker/foundation.ts

@@ -18,6 +18,7 @@ import type { Type, DateInputFoundationProps, InsetInputValue } from './inputFou
 import type { MonthsGridFoundationProps } from './monthsGridFoundation';
 import type { WeekStartNumber } from './_utils/getMonthTable';
 import isValidTimeZone from './_utils/isValidTimeZone';
+import warning from '../utils/warning';
 
 export type ValidateStatus = ArrayElement<typeof strings.STATUS>;
 export type InputSize = ArrayElement<typeof strings.SIZE_SET>;
@@ -291,6 +292,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
                         parsedV = zonedTimeToUtc(parsedV, prevTimeZone);
                     }
                     result.push(isValidTimeZone(timeZone) ? utcToZonedTime(parsedV, timeZone) : parsedV);
+                } else {
+                    warning(true, `[Semi DatePicker] value cannot be parsed, value: ${String(v)}`);
                 }
             }
         }

packages/semi-ui/datePicker/_story/datePicker.stories.jsx

@@ -70,7 +70,8 @@ export {
     FixDisabledDate,
     FeatInsetInputShowClear,
     AutoSplitInput,
-    FixNeedConfirmControlled
+    FixNeedConfirmControlled,
+    FixedNaN
 } from './v2';
 
 

packages/semi-ui/datePicker/_story/v2/FixedNaN.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Button, DatePicker, Space } from '@douyinfe/semi-ui';
+
+export default function App() {
+    const [value, setValue] = useState<Array<Date | typeof NaN>>([NaN, NaN]);
+
+    const handleChange = v => {
+        console.log('change', v);
+        setValue(v as Date[]);
+    };
+
+    return (
+        <Space vertical align="start">
+            <Space>
+                <Button onClick={() => setValue([NaN, NaN])}>set NaN</Button>{' '}
+                <h4>current props value: {value.toString()}</h4>
+            </Space>
+            <DatePicker
+                presets={[
+                    {
+                        text: 'Empty',
+                        start: null,
+                        end: null,
+                    },
+                ]}
+                type="dateRange"
+                value={value}
+                onChange={handleChange}
+            />
+        </Space>
+    );
+}

packages/semi-ui/datePicker/_story/v2/index.js

@@ -28,3 +28,4 @@ export { default as FeatYearScrollRange } from './FeatYearScrollRange';
 export { default as FeatInsetInputShowClear } from './FeatInsetInputShowClear';
 export { default as AutoSplitInput } from './AutoSplitInput';
 export { default as FixNeedConfirmControlled } from './FixNeedConfirmControlled';
+export { default as FixedNaN } from './FixedNaN';

packages/semi-ui/datePicker/datePicker.tsx

@@ -406,7 +406,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     }
 
     componentDidUpdate(prevProps: DatePickerProps) {
-        if (prevProps.value !== this.props.value) {
+        if (prevProps.value !== this.props.value && !Number.isNaN(this.props.value)) {
             this.foundation.initFromProps({
                 ...this.props,
             });