Merge branch 'main' of github.com:DouyinFE/semi-design

cypress/integration/datePicker.spec.js

@@ -266,4 +266,21 @@ describe('DatePicker', () => {
             cy.get(`${wrapper} .semi-input-wrapper`).should('not.have.class', 'semi-input-wrapper-disabled');
         }
     });
+
+    it('defaultPickerValue is number', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=datepicker--fix-default-picker-value&viewMode=story');
+        cy.get('[data-cy=dateTime] .semi-input').first().click();
+        cy.get('[x-type=dateTime] .semi-datepicker-switch-text').first().contains('2021-03-15');
+        cy.get('[x-type=dateTime] .semi-datepicker-switch-text').last().contains('00:00:00');
+
+        cy.get('[data-cy=dateTimeRange] .semi-input').first().click();
+        cy.get('[x-type=dateTimeRange] .semi-datepicker-switch-text').eq(0).contains('2021-03-15');
+        cy.get('[x-type=dateTimeRange] .semi-datepicker-switch-text').eq(1).contains('00:00:00');
+        cy.get('[x-type=dateTimeRange] .semi-datepicker-switch-text').eq(2).contains('2021-05-15');
+        cy.get('[x-type=dateTimeRange] .semi-datepicker-switch-text').eq(3).contains('23:59:59');
+
+        cy.get('[data-cy=before-1970] .semi-input').first().click();
+        cy.get('[x-type=dateTime] .semi-datepicker-switch-text').first().contains('1910-01-01');
+        cy.get('[x-type=dateTime] .semi-datepicker-switch-text').last().contains('13:00:00');
+    });
 });

packages/semi-foundation/datePicker/_utils/getDefaultPickerDate.ts

@@ -0,0 +1,54 @@
+import { addMonths, Locale as dateFnsLocale } from 'date-fns';
+import isValidDate from './isValidDate';
+import { compatiableParse } from './parser';
+import isTimestamp from './isTimestamp';
+
+/**
+ * get left panel picker date and right panel picker date
+ */
+export default function getDefaultPickerDate(options: GetDefaultPickerValueDateOptions) {
+    const { defaultPickerValue, format, dateFnsLocale } = options;
+    let nowDate = Array.isArray(defaultPickerValue) ? defaultPickerValue[0] : defaultPickerValue;
+    let nextDate = Array.isArray(defaultPickerValue) ? defaultPickerValue[1] : undefined;
+
+    switch (true) {
+        case isValidDate(nowDate):
+            break;
+        case isTimestamp(nowDate):
+            nowDate = new Date(nowDate);
+            break;
+        case typeof nowDate === 'string':
+            nowDate = compatiableParse(nowDate as string, format, undefined, dateFnsLocale);
+            break;
+        default:
+            nowDate = new Date();
+            break;
+    }
+
+    switch (true) {
+        case isValidDate(nextDate):
+            break;
+        case isTimestamp(nextDate):
+            nextDate = new Date(nextDate);
+            break;
+        case typeof nextDate === 'string':
+            nextDate = compatiableParse(nextDate as string, format, undefined, dateFnsLocale);
+            break;
+        default:
+            nextDate = addMonths(nowDate as Date, 1);
+            break;
+    }
+
+    return {
+        nowDate: nowDate as Date,
+        nextDate: nextDate as Date,
+    };
+}
+
+type BaseValueType = string | number | Date;
+
+interface GetDefaultPickerValueDateOptions {
+    defaultPickerValue?: BaseValueType | BaseValueType[];
+    format: string;
+    dateFnsLocale: dateFnsLocale;
+}

packages/semi-foundation/datePicker/datePicker.scss

@@ -46,7 +46,7 @@ $module: #{$prefix}-datepicker;
             min-height: $height-datepicker_dateType_yamShowing_min;
         }
 
-        &[x-insetInput=true] {
+        &[x-insetinput=true] {
             .#{$module}-month-grid-left,
             .#{$module}-month-grid-right {
                 &[x-open-type=year] {
@@ -928,7 +928,7 @@ $module: #{$prefix}-datepicker;
             }
         }
 
-        &[x-insetInput=true] {
+        &[x-insetinput=true] {
             .#{$module}-month-grid-left,
             .#{$module}-month-grid-right {
                 &[x-open-type=year] {

packages/semi-ui/datePicker/_story/v2/FixDefaultPickerValue.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DatePicker, Space } from '../../../index';
+
+App.storyName = "fix defaultPickerValue number bug";
+export default function App() {
+    const defaultPickerValue = new Date('2021-03-15 00:00:00').valueOf();
+    const defaultPickerValueArray = [new Date('2021-03-15 00:00:00').valueOf(), new Date('2021-05-15 23:59:59').valueOf()];
+    return (            
+        <Space>
+            <div data-cy="dateTime">
+                <DatePicker
+                    type="dateTime"
+                    defaultPickerValue={defaultPickerValue}
+                />
+            </div>
+            <div data-cy="dateTimeRange">
+                <DatePicker
+                    type="dateTimeRange"
+                    defaultPickerValue={defaultPickerValueArray}
+                />
+            </div>
+            <div data-cy="before-1970">
+                <DatePicker
+                    type="dateTime"
+                    defaultPickerValue={new Date('1910-01-01 13:00:00')}
+                />
+            </div>
+        </Space>
+
+    );
+}

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

@@ -3,3 +3,4 @@ export { default as PanelOpen  } from './PanelOpen';
 export { default as FixInputRangeFocus } from './FixInputRangeFocus';
 export { default as InsetInput  } from './InsetInput';
 export { default as InsetInputE2E  } from './InsetInputE2E';
+export { default as FixDefaultPickerValue } from './FixDefaultPickerValue';

packages/semi-ui/datePicker/monthsGrid.tsx

@@ -19,6 +19,7 @@ import Combobox from '../timePicker/Combobox';
 import YearAndMonth from './yearAndMonth';
 import { IconClock, IconCalendar } from '@douyinfe/semi-icons';
 import { getDefaultFormatTokenByType } from '@douyinfe/semi-foundation/datePicker/_utils/getDefaultFormatToken';
+import getDefaultPickerDate from '@douyinfe/semi-foundation/datePicker/_utils/getDefaultPickerDate';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -90,19 +91,8 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
     constructor(props: MonthsGridProps) {
         super(props);
-        let nowDate = Array.isArray(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
         const validFormat = props.format || getDefaultFormatTokenByType(props.type);
-        if (!nowDate) {
-            nowDate = new Date();
-        } else {
-            nowDate = compatiableParse(nowDate as string, validFormat, undefined, props.dateFnsLocale);
-        }
-        let nextDate = Array.isArray(props.defaultPickerValue) ? props.defaultPickerValue[1] : undefined;
-        if (!nextDate) {
-            nextDate = addMonths(nowDate, 1);
-        } else {
-            nextDate = compatiableParse(nextDate as string, validFormat, undefined, props.dateFnsLocale);
-        }
+        const { nowDate, nextDate } = getDefaultPickerDate({ defaultPickerValue: props.defaultPickerValue, format: validFormat, dateFnsLocale: props.dateFnsLocale });
 
         const dateState = {
             // Direct use of full date string storage, mainly considering the month rendering comparison to save a conversion
@@ -636,7 +626,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                 x-type={type}
                 x-panel-yearandmonth-open-type={yearOpenType}
                 // FIXME:
-                x-insetInput={insetInput ? "true" : "false"}
+                x-insetinput={insetInput ? "true" : "false"}
                 ref={current => this.cacheRefCurrent('monthGrid', current)}
             >
                 {content}