feat: DatePicker support split first inset input #1787 (#1887)

Co-authored-by: shijia.me <[email protected]>

cypress/e2e/datePicker.spec.js

@@ -775,4 +775,31 @@ describe('DatePicker', () => {
         cy.get('.semi-input').eq(0).should('have.value', '2023-05-03');
         cy.get('.semi-input').eq(1).should('have.value', '2023-05-10');
     });
+
+    it('test split first inset input + dateTime', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=datepicker--auto-split-input&viewMode=story');
+        cy.get('[data-cy=dateTime] .semi-input').click();
+        cy.window().then(window => {
+            window.document.querySelector('.semi-popover .semi-input').setAttribute('value', '2023-09-05 17:41:36');
+            cy.get('.semi-popover .semi-input').eq(0).trigger('change')
+            cy.get('.semi-popover .semi-input').eq(0).should('have.value', '2023-09-05');
+            cy.get('.semi-popover .semi-input').eq(1).should('have.value', '17:41:36');
+            cy.get('.semi-datepicker-day-selected').contains("5");
+        })
+    });
+
+    it('test split first inset input + dateTimeRange', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=datepicker--auto-split-input&viewMode=story');
+        cy.get('[data-cy=dateTimeRange] .semi-input').eq(0).click();
+        cy.window().then(window => {
+            window.document.querySelector('.semi-popover .semi-input').setAttribute('value', '2023-10-09 16:14:31 ~ 2023-10-13 16:14:31');
+            cy.get('.semi-popover .semi-input').eq(0).trigger('change')
+            cy.get('.semi-popover .semi-input').eq(0).should('have.value', '2023-10-09');
+            cy.get('.semi-popover .semi-input').eq(1).should('have.value', '16:14:31');
+            cy.get('.semi-popover .semi-input').eq(2).should('have.value', '2023-10-13');
+            cy.get('.semi-popover .semi-input').eq(3).should('have.value', '16:14:31');
+            cy.get('.semi-datepicker-day-selected-start').contains("9");
+            cy.get('.semi-datepicker-day-selected-end').contains("13");
+        })
+    });
 });

packages/semi-foundation/datePicker/inputFoundation.ts

@@ -189,12 +189,14 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
 
     handleInsetInputChange(options: InsetInputChangeFoundationProps) {
         const { value, valuePath, insetInputValue } = options;
-        const { format, type } = this._adapter.getProps();
+        const { format, type, rangeSeparator } = this._adapter.getProps();
         const insetFormatToken = getInsetInputFormatToken({ type, format });
-        let newInsetInputValue = set(cloneDeep(insetInputValue), valuePath, value);
-        newInsetInputValue = this._autoFillTimeToInsetInputValue({ insetInputValue: newInsetInputValue, valuePath, format: insetFormatToken });
-        const newInputValue = this.concatInsetInputValue({ insetInputValue: newInsetInputValue });
-        this._adapter.notifyInsetInputChange({ insetInputValue: newInsetInputValue, format: insetFormatToken, insetInputStr: newInputValue });
+        const newInsetInputValue = set(cloneDeep(insetInputValue), valuePath, value);
+        const insetInputStr = this.concatInsetInputValue({ insetInputValue: newInsetInputValue });
+        const parsedInsetInputValueFromInputStr = getInsetInputValueFromInsetInputStr({ inputValue: insetInputStr, type, rangeSeparator });
+        const filledTimeInsetInputValue = this._autoFillTimeToInsetInputValue({ insetInputValue: parsedInsetInputValueFromInputStr, valuePath, format: insetFormatToken });
+        const finalInsetInputStr = this.concatInsetInputValue({ insetInputValue: filledTimeInsetInputValue });
+        this._adapter.notifyInsetInputChange({ insetInputValue: filledTimeInsetInputValue, format: insetFormatToken, insetInputStr: finalInsetInputStr });
     }
 
     _autoFillTimeToInsetInputValue(options: { insetInputValue: InsetInputValue; format: string; valuePath: string}) {

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

@@ -68,7 +68,8 @@ export {
     DynamicDisabledDate,
     FeatEtcGMT,
     FixDisabledDate,
-    FeatInsetInputShowClear
+    FeatInsetInputShowClear,
+    AutoSplitInput
 } from './v2';
 
 

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { DatePicker, Space, Input } from '../../../index';
+
+/**
+ * 输入开始日期后，自动拆分并选中
+ */
+export default function AutoSplitInput() {
+    const format = 'yyyy-MM-dd HH:mm:ss';
+    
+    const handleChange = (...args) => {
+        console.log('change', ...args);
+    };
+
+    const props = {
+        format,
+        insetInput: true,
+        onChange: handleChange,
+        motion: false,
+    };
+
+    return (
+        <Space data-cy="container" vertical align="start">
+            <div>复制文本，粘贴到 DatePicker 内嵌第一个输入框内</div>
+            <Space>
+                <Input style={{ width: 200 }} defaultValue="2023-09-05 17:41:36" />
+                <div data-cy="dateTime">
+                    <DatePicker {...props} type="dateTime" />
+                </div>
+            </Space>
+            <Space>
+                <Input style={{ width: 400 }} defaultValue="2023-10-09 16:14:31 ~ 2023-10-13 16:14:31" />
+                <div data-cy="dateTimeRange">
+                    <DatePicker {...props} type="dateTimeRange" />
+                </div>
+            </Space>
+        </Space>
+    );
+}

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

@@ -26,3 +26,4 @@ export { default as FeatEtcGMT } from './FeatEtcGMT';
 export { default as FixDisabledDate } from './FixDisabledDate';
 export { default as FeatYearScrollRange } from './FeatYearScrollRange';
 export { default as FeatInsetInputShowClear } from './FeatInsetInputShowClear';
+export { default as AutoSplitInput } from './AutoSplitInput';