@douyinfe/semi-foundation 2.6.0 → 2.7.1

package/button/button.scss

@@ -24,8 +24,16 @@ $module: #{$prefix}-button;
     vertical-align: middle;
     white-space: nowrap;
 
-    &:focus {
-        outline: $width-button-outline solid $color-button_primary-outline-focus;
+    // the specificity of `.#{$module}:focus-visible`  may lower than `reset.css` default `focus-visible` style
+    // so we add a class at the same level
+    &.#{$module}-primary,
+    &.#{$module}-secondary,
+    &.#{$module}-tertiary,
+    &.#{$module}-warning,
+    &.#{$module}-danger {
+        &:focus-visible {
+            outline: $width-button-outline solid $color-button_primary-outline-focus;
+        }
     }
 
     &-danger {
@@ -41,8 +49,8 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_danger-bg-default;
         }
-        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
-            outline-color: $color-button_danger-outline-focus;
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
+            outline: $width-button-outline solid $color-button_danger-outline-focus;
         }
     }
     &-warning {
@@ -58,8 +66,8 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_warning-bg-default;
         }
-        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
-            outline-color: $color-button_warning-outline-focus;
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
+            outline: $width-button-outline solid $color-button_warning-outline-focus;
         }
     }
     &-tertiary {

package/datePicker/_utils/formatter.ts

@@ -18,9 +18,9 @@ export function formatDateValues(
     values: BaseValueType[],
     formatToken: string,
     {
-        groupInnerSeparator = strings.DEFAULT_SEPARATOR_RANGE,
+        groupInnerSeparator = strings.DEFAULT_SEPARATOR_RANGE as string,
         groupSize = 1,
-        groupSeparator = strings.DEFAULT_SEPARATOR_MULTIPLE,
+        groupSeparator = strings.DEFAULT_SEPARATOR_MULTIPLE as string,
     } = {},
     locale: any
 ) {

package/datePicker/_utils/getInsetInputFormatToken.ts

@@ -0,0 +1,42 @@
+import { strings } from '../constants';
+import { getDefaultFormatTokenByType } from './getDefaultFormatToken';
+
+/**
+ * 获取 insetInput 输入框的 placeholder
+ * Get the placeholder of the insetInput input
+ * 
+ * If type is time related, we only recognize the format like `dateFormat timeFormat`
+ *  - 'yyyy-MM-dd HH:mm:ss' // ok
+ *  - 'yyyy-MM-dd  HH:mm:ss' // bad format
+ * 
+ * @example
+ * 'yyyy-MM-dd' => 'yyyy-MM-dd'
+ * 'yyyy-MM' => 'yyyy-MM'
+ * 'yyyy-MM-dd HH:mm:ss' => 'yyyy-MM-dd HH:mm:ss'
+ * 'yyyy-MM-dd HH:mm' => 'yyyy-MM-dd HH:mm'
+ * 'Pp' => 'yyyy-MM-dd'
+ */
+export default function getInsetInputFormatToken(options: { format: string, type: typeof strings.TYPE_SET[number]; }) {
+    const { format, type } = options;
+    const dateReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4})/i;
+    const dateTimeReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4}) (H{0,2}[^a-z\s]*m{0,2}[^a-z\s]*s{0,2})/i;
+    const defaultToken = getDefaultFormatTokenByType(type);
+    let insetInputFormat: string;
+
+    switch (type) {
+        case 'dateTime':
+        case 'dateTimeRange':
+            const dateTimeResult = dateTimeReg.exec(format);
+            insetInputFormat = (dateTimeResult && dateTimeResult[1] && dateTimeResult[2]) ? `${dateTimeResult[1]} ${dateTimeResult[2]}` : defaultToken;
+            break;
+        case 'date':
+        case 'month':
+        case 'dateRange':
+        default:
+            const dateResult = dateReg.exec(format);
+            insetInputFormat = dateResult && dateResult[1] || defaultToken;
+            break;
+    }
+
+    return insetInputFormat;
+}

package/datePicker/_utils/getInsetInputValueFromInsetInputStr.ts

@@ -0,0 +1,60 @@
+import { strings } from '../constants'; 
+
+/**
+ * 从 insetInputStr 字符串解析出 insetInputValue 对象
+ * Parse the insetInputValue object from the insetInputStr string
+ * 
+ * @example
+ * ```
+ * '2022-02-01' => { monthLeft: { dateInput: '2022-02-01' } }
+ * '2022-02-01 00:00:00' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00' } }
+ * '2022-02-01 00:00:00 ~ 2022-02-15 00:00:00' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00'}, monthRight: { dateInput: '2022-02-15', timeInput: '00:00:00' } }
+ * 
+ * '2022-0' => { monthLeft: { dateInput: '2022-0' } }
+ * '2022-02-01 00:00:' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:' } }
+ * '2022-02-01 00:00:00 ~ ' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00'}, monthRight: { dateInput: '', timeInput: '' } }
+ * ' ~ 2022-02-15 00:00:00' => { monthLeft: { dateInput: '', timeInput: '' }, monthRight: { dateInput: '2022-02-15', timeInput: '00:00:00' } }
+ * ```
+ */
+export default function getInsetInputValueFromInsetInputStr(options: { inputValue: string; rangeSeparator: string, type: typeof strings.TYPE_SET[number] }) {
+    const timeSeparator = ' ';
+    const { inputValue = '', rangeSeparator, type } = options;
+    let leftDateInput, leftTimeInput, rightDateInput, rightTimeInput;
+    const insetInputValue = {
+        monthLeft: {
+            dateInput: '',
+            timeInput: '',
+        },
+        monthRight: {
+            dateInput: '',
+            timeInput: '',
+        }
+    };
+
+    switch (type) {
+        case 'date':
+        case 'month':
+            insetInputValue.monthLeft.dateInput = inputValue;
+            break;
+        case 'dateRange':
+            [leftDateInput = '', rightDateInput = ''] = inputValue.split(rangeSeparator);
+            insetInputValue.monthLeft.dateInput = leftDateInput;
+            insetInputValue.monthRight.dateInput = rightDateInput;
+            break;
+        case 'dateTime':
+            [leftDateInput = '', leftTimeInput = ''] = inputValue.split(timeSeparator);
+            insetInputValue.monthLeft.dateInput = leftDateInput;
+            insetInputValue.monthLeft.timeInput = leftTimeInput;
+            break;
+        case 'dateTimeRange':
+            const [leftInput = '', rightInput = ''] = inputValue.split(rangeSeparator);
+            [leftDateInput = '', leftTimeInput = ''] = leftInput.split(timeSeparator);
+            [rightDateInput = '', rightTimeInput = ''] = rightInput.split(timeSeparator);
+            insetInputValue.monthLeft.dateInput = leftDateInput;
+            insetInputValue.monthLeft.timeInput = leftTimeInput;
+            insetInputValue.monthRight.dateInput = rightDateInput;
+            insetInputValue.monthRight.timeInput = rightTimeInput;
+            break;
+    }
+    return insetInputValue;
+}

package/datePicker/constants.ts

@@ -52,6 +52,7 @@ const strings = {
     PANEL_TYPE_RIGHT: 'right',
     STATUS: VALIDATE_STATUS,
     POSITION_SET: POPOVER_STRINGS.POSITION_SET,
+    POSITION_INLINE_INPUT: 'leftTopOver',
     ...formatToken,
 } as const;
 
@@ -59,6 +60,7 @@ const numbers = {
     WEEK_START_ON: 0, // Take the day of the week as the first day of the week, 0 for Sunday, 1 for Monday, and so on
     WEEK_HEIGHT: 36, // Date per line height 36px
     SPACING: popoverNumber.SPACING, // Floating distance trigger interval
+    SPACING_INSET_INPUT: 1,
 } as const;
 
 export { cssClasses, strings, numbers };

package/datePicker/datePicker.scss

@@ -6,6 +6,7 @@ $module: #{$prefix}-datepicker;
 .#{$module} {
     box-sizing: border-box;
     display: inline-block;
+    vertical-align: top;
 
     // 双月网格
 
@@ -45,6 +46,34 @@ $module: #{$prefix}-datepicker;
             min-height: $height-datepicker_dateType_yamShowing_min;
         }
 
+        &[x-insetInput=true] {
+            .#{$module}-month-grid-left,
+            .#{$module}-month-grid-right {
+                &[x-open-type=year] {
+                    min-height: $height-datepicker_month_grid_yearType_insetInput;
+                }
+                &[x-open-type=time] {
+                    min-height: $height-datepicker_month_grid_timeType_insetInput;
+                }
+            }
+
+            .#{$module}-navigation {
+                padding-top: $spacing-datepicker_navigation_insetInput-paddingY;
+                padding-bottom: $spacing-datepicker_navigation_insetInput-paddingY;
+            }
+
+            .#{$module}-tpk {
+                min-height: $height-datepicker_timeType_insetInput_tpk;
+            }
+
+            &[x-type=dateTime],
+            &[x-type=dateTimeRange] {
+                .#{$module}-yam {
+                    height: $height-datepicker_timeType_insetInput_yam;
+                }
+            }
+        }
+
         // 年月选择返回主面板
         .#{$module}-yearmonth-header {
             background: $color-datepicker_header-bg-default;
@@ -92,6 +121,7 @@ $module: #{$prefix}-datepicker;
 
                 @include font-size-regular;
                 min-height: $height-datepicker_timepicker_header_min;
+                line-height: $height-datepicker_timepicker_header_min;
             }
         }
 
@@ -581,6 +611,41 @@ $module: #{$prefix}-datepicker;
         cursor: pointer;
     }
 
+    &-inset-input {
+        &-wrapper {
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            box-sizing: border-box;
+            column-gap: $spacing-datepicker_insetInput_wrapper-margin;
+            padding: $spacing-datepicker_insetInput_wrapper-paddingY $spacing-datepicker_insetInput_wrapper-paddingX;
+            padding-bottom: $spacing-datepicker_insetInput_wrapper-paddingBottom;
+
+            width: $width-datepicker_insetInput_date_type_wrapper;
+            &[x-type=dateRange],
+            &[x-type=dateTimeRange] {
+                width: $width-datepicker_insetInput_date_range_type_wrapper;
+            }
+            &[x-type=month] {
+                width: $width-datepicker_insetInput_month_type_wrapper;
+            }
+
+            .#{$prefix}-input-wrapper {
+                flex: 1;
+                flex-shrink: 0;
+            }
+        }
+
+        &-separator {
+            flex-grow: 0;
+            flex-shrink: 0;
+            height: $height-datepicker_insetInput_separator;
+            line-height: $height-datepicker_insetInput_separator;
+            padding: $spacing-datepicker_insetInput_separator-paddingY $spacing-datepicker_insetInput_separator-paddingX;
+            color: $color-datepicker_insetInput_separator;
+        }
+    }
+
     &-range {
 
         &-input {
@@ -862,6 +927,33 @@ $module: #{$prefix}-datepicker;
                 min-height: 6 * $width-datepicker_day_compact;
             }
         }
+
+        &[x-insetInput=true] {
+            .#{$module}-month-grid-left,
+            .#{$module}-month-grid-right {
+                &[x-open-type=year] {
+                    min-height: $height-datepicker_tpk_compact;
+                }
+                &[x-open-type=time] {
+                    min-height: $height-datepicker_tpk_compact;
+                }
+            }
+
+            .#{$module}-yam-showing {
+                min-height: $height-datepicker_tpk_compact;
+            }
+
+            .#{$module}-tpk {
+                min-height: $height-datepicker_insetInput_tpk_compact;
+            }
+
+            &[x-type=dateTime],
+            &[x-type=dateTimeRange] {
+                .#{$module}-yam {
+                    height: $height-datepicker_timeType_insetInput_yam_compact;
+                }
+            }
+        }
     }
 
     // 年月选择器
@@ -1039,6 +1131,46 @@ $module: #{$prefix}-datepicker;
         padding-right: $spacing-datepicker_footer_compact-paddintRight;
         padding-bottom: $spacing-datepicker_footer_compact-paddintBottom;
     }
+
+    .#{$module}-inset-input {
+        &-wrapper {
+            column-gap: $spacing-datepicker_insetInput_wrapper_compact-margin;
+            padding: $spacing-datepicker_insetInput_wrapper_compact-paddingY $spacing-datepicker_insetInput_wrapper_compact-paddingX;
+            padding-bottom: $spacing-datepicker_insetInput_wrapper_compact-paddingBottom;
+
+            width: $width-datepicker_insetInput_date_type_wrapper_compact;
+            &[x-type=dateRange],
+            &[x-type=dateTimeRange] {
+                width: $width-datepicker_insetInput_date_range_type_wrapper_compact;
+                padding-top: $spacing-datepicker_insetInput_wrapper_rangeType_compact-paddingTop;
+
+                .#{$prefix}-input-wrapper {
+                    margin-top: $spacing-datepicker_insetInput_wrapper_compact-paddingY;
+                }
+            }
+            &[x-type=month] {
+                width: $width-datepicker_insetInput_month_type_wrapper_compact;
+            }
+
+            .#{$prefix}-input-wrapper {
+                height: $height-datepicker_insetInput_wrapper_compact;
+                box-sizing: border-box;
+
+                .#{$prefix}-input {
+                    font-size: $fontSize-datepicker_insetInput_compact-fontSize;
+                    line-height: $height-datepicker_insetInput_compact;
+                    height: $height-datepicker_insetInput_compact;
+                    vertical-align: top;
+                }
+            }
+        }
+
+        &-separator {
+            border-left: $width-datepicker-border solid $color-datepicker_border-bg-default;
+            transform: translateX(50%);
+            height: auto;
+        }
+    }
 }
 
 // 向上弹出时固定高度为6周 #1042
@@ -1046,8 +1178,10 @@ $module: #{$prefix}-datepicker;
 
     &-wrapper {
 
-        &[x-placement*="top"],
-        &[x-placement*="Top"] {
+        &[x-placement^="top"],
+        &[x-placement="leftTop"],
+        &[x-placement="rightTop"],
+        &[x-placement*="BottomOver"] {
             .#{$module} .#{$module}-weeks {
                 min-height: 6 * $width-datepicker_day;
             }
@@ -1056,7 +1190,6 @@ $module: #{$prefix}-datepicker;
                 min-height: 6 * $width-datepicker_day_compact;
             }
         }
-        
     }
 }
 

package/datePicker/foundation.ts

@@ -12,10 +12,12 @@ import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
 import { strings } from './constants';
 import { strings as inputStrings } from '../input/constants';
 
-import { Type, DateInputFoundationProps } from './inputFoundation';
+import { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
 import { MonthsGridFoundationProps } from './monthsGridFoundation';
 import { WeekStartNumber } from './_utils/getMonthTable';
 import { ArrayElement, Motion } from '../utils/type';
+import getInsetInputFormatToken from './_utils/getInsetInputFormatToken';
+import getInsetInputValueFromInsetInputStr from './_utils/getInsetInputValueFromInsetInputStr';
 
 export type ValidateStatus = ArrayElement<typeof strings.STATUS>;
 export type InputSize = ArrayElement<typeof strings.SIZE_SET>;
@@ -92,6 +94,8 @@ export interface RenderProps {
     triggerRender?: TriggerRenderType;
 }
 
+export type RangeType = 'rangeStart' | 'rangeEnd' | false;
+
 export interface EventHandlerProps {
     onCancel?: OnCancelType;
     onChange?: OnChangeType;
@@ -104,7 +108,7 @@ export interface EventHandlerProps {
     // onClear?: React.MouseEventHandler<HTMLDivElement>;
     onClear?: (e: any) => void;
     // onFocus?: React.MouseEventHandler<HTMLInputElement>;
-    onFocus?: (e: any, rangType: 'rangeStart' | 'rangeEnd') => void;
+    onFocus?: (e: any, rangType: RangeType) => void;
     onPresetClick?: OnPresetClickType;
 }
 
@@ -157,6 +161,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     dateFnsLocale?: any;
     localeCode?: string;
     rangeSeparator?: string;
+    insetInput?: boolean;
 }
 
 export interface DatePickerFoundationState {
@@ -167,8 +172,10 @@ export interface DatePickerFoundationState {
     cachedSelectedValue: Date[];
     prevTimeZone: string | number;
     motionEnd: boolean;
-    rangeInputFocus: 'rangeStart' | 'rangeEnd' | boolean;
+    rangeInputFocus: RangeType;
     autofocus: boolean;
+    insetInputValue: InsetInputValue;
+    triggerDisabled: boolean;
 }
 
 export { Type, DateInputFoundationProps };
@@ -195,6 +202,9 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
     setRangeInputFocus: (rangeInputFocus: DatePickerFoundationState['rangeInputFocus']) => void;
     couldPanelClosed: () => boolean;
     isEventTarget: (e: any) => boolean;
+    updateInsetInputValue: (insetInputValue: InsetInputValue) => void;
+    setInsetInputFocus: () => void;
+    setTriggerDisabled: (disabled: boolean) => void;
 }
 
 
@@ -350,6 +360,16 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         }
     }
 
+    /**
+     * clear inset input value when close panel
+     */
+    clearInsetInputValue() {
+        const { insetInput } = this._adapter.getProps();
+        if (insetInput) {
+            this._adapter.updateInsetInputValue(null);
+        }
+    }
+
     resetCachedSelectedValue(willUpdateDates?: Date[]) {
         const { value, cachedSelectedValue } = this._adapter.getStates();
         const newCachedSelectedValue = Array.isArray(willUpdateDates) ? willUpdateDates : value;
@@ -380,6 +400,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         // range type picker, closing panel requires the following side effects
         this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates as Date[]);
         this.needConfirmSideEffectsWhenClosePanel(willUpdateDates as Date[]);
+        this.clearInsetInputValue();
         this._adapter.notifyOpenChange(false);
         this._adapter.notifyBlur(e);
     }
@@ -428,6 +449,37 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         }
     }
 
+    /**
+     * inset input 变化时需要更新以下 state 状态
+     *  - insetInputValue（总是）
+     *  - inputValue（可以解析为合法日期时）
+     *  - value（可以解析为合法日期时）
+     */
+    handleInsetInputChange(options: { insetInputStr: string, format: string, insetInputValue: InsetInputValue }) {
+        const { insetInputStr, format, insetInputValue } = options;
+        const _isMultiple = this._isMultiple();
+        const result = _isMultiple ? this.parseMultipleInput(insetInputStr, format) : this.parseInput(insetInputStr, format);
+        const { value: stateValue } = this.getStates();
+
+        if ((result && result.length)) {
+            const changedDates = this._getChangedDates(result);
+            if (!this._someDateDisabled(changedDates)) {
+                if (this._adapter.needConfirm()) {
+                    this._adapter.updateCachedSelectedValue(result);
+                }
+                if (!isEqual(result, stateValue)) {
+                    if (!this._isControlledComponent()) {
+                        this._adapter.updateValue(result);
+                    }
+                    this._notifyChange(result);
+                }
+                const triggerInput = _isMultiple ? this.formatMultipleDates(result) : this.formatDates(result);
+                this._adapter.updateInputValue(triggerInput);
+            }
+        }
+        this._adapter.updateInsetInputValue(insetInputValue);
+    }
+
     /**
      * Input box blur
      * @param {String} input
@@ -479,7 +531,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         }
     }
 
-    handleSetRangeFocus(rangeInputFocus: boolean | 'rangeStart' | 'rangeEnd') {
+    handleSetRangeFocus(rangeInputFocus: RangeType) {
         this._adapter.setRangeInputFocus(rangeInputFocus);
     }
 
@@ -546,14 +598,14 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {string} input
      * @returns  {Date [] | '}
      */
-    parseInput(input = '') {
+    parseInput(input = '', format?: string) {
         let result: Date[] = [];
         // console.log(input);
         const { dateFnsLocale, rangeSeparator } = this.getProps();
 
         if (input && input.length) {
             const type = this.getProp('type');
-            const formatToken = this.getProp('format') || getDefaultFormatTokenByType(type);
+            const formatToken = format || this.getProp('format') || getDefaultFormatTokenByType(type);
             let parsedResult,
                 formatedInput;
             const nowDate = new Date();
@@ -636,13 +688,13 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Date[]} dates
      * @returns {string}
      */
-    formatDates(dates: Date[] = []) {
+    formatDates(dates: Date[] = [], customFormat?: string) {
         let str = '';
         const rangeSeparator = this.getProp('rangeSeparator');
 
         if (Array.isArray(dates) && dates.length) {
             const type = this.getProp('type');
-            const formatToken = this.getProp('format') || getDefaultFormatTokenByType(type);
+            const formatToken = customFormat || this.getProp('format') || getDefaultFormatTokenByType(type);
 
             switch (type) {
                 case 'date':
@@ -679,7 +731,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Date[]} dates
      * @returns {string}
      */
-    formatMultipleDates(dates: Date[] = [], separator: string = strings.DEFAULT_SEPARATOR_MULTIPLE) {
+    formatMultipleDates(dates: Date[] = [], separator: string = strings.DEFAULT_SEPARATOR_MULTIPLE, customFormat?: string) {
         const strs = [];
         if (Array.isArray(dates) && dates.length) {
             const type = this.getProp('type');
@@ -688,12 +740,12 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
                 case 'date':
                 case 'dateTime':
                 case 'month':
-                    dates.forEach(date => strs.push(this.formatDates([date])));
+                    dates.forEach(date => strs.push(this.formatDates([date], customFormat)));
                     break;
                 case 'dateRange':
                 case 'dateTimeRange':
                     for (let i = 0; i < dates.length; i += 2) {
-                        strs.push(this.formatDates(dates.slice(i, i + 2)));
+                        strs.push(this.formatDates(dates.slice(i, i + 2), customFormat));
                     }
                     break;
                 default:
@@ -735,7 +787,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {*} options
      */
     handleSelectedChange(value: Date[], options?: { fromPreset?: boolean; needCheckFocusRecord?: boolean }) {
-        const type = this.getProp('type');
+        const { type, format, rangeSeparator, insetInput } = this._adapter.getProps();
         const { value: stateValue } = this.getStates();
         const controlled = this._isControlledComponent();
         const fromPreset = isObject(options) ? options.fromPreset : options;
@@ -754,9 +806,14 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         const dates = Array.isArray(value) ? [...value] : value ? [value] : [];
         const changedDates = this._getChangedDates(dates);
 
-        let inputValue;
+        let inputValue, insetInputValue;
         if (!this._someDateDisabled(changedDates)) {
             inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
+            if (insetInput) {
+                const insetInputFormatToken = getInsetInputFormatToken({ format, type });
+                const insetInputStr = this._isMultiple() ? this.formatMultipleDates(dates, undefined, insetInputFormatToken) : this.formatDates(dates, insetInputFormatToken);
+                insetInputValue = getInsetInputValueFromInsetInputStr({ inputValue: insetInputStr, type, rangeSeparator  });
+            }
             const isRangeTypeAndInputIncomplete = this._isRangeType() && !this._isRangeValueComplete(dates);
             /**
              * If the input is incomplete when under control, the notifyChange is not triggered because
@@ -769,14 +826,19 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
                 if (isRangeTypeAndInputIncomplete) {
                     // do not change value when selected value is incomplete
                     this._adapter.updateInputValue(inputValue);
+                    this._adapter.updateInsetInputValue(insetInputValue);
                     return;
                 } else {
-                    (!controlled || fromPreset) && this._updateValueAndInput(dates, true, inputValue);
+                    if (!controlled || fromPreset) {
+                        this._updateValueAndInput(dates, true, inputValue);
+                        this._adapter.updateInsetInputValue(insetInputValue);
+                    }
                 }
             }
             if (!controlled && this._adapter.needConfirm()) {
                 // select date only change inputValue when needConfirm is true
                 this._adapter.updateInputValue(inputValue);
+                this._adapter.updateInsetInputValue(insetInputValue);
                 // if inputValue is not complete, don't notifyChange
                 if (isRangeTypeAndInputIncomplete) {
                     return;
@@ -810,7 +872,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     }
 
     handleConfirm() {
-        const { cachedSelectedValue, value } = this.getStates();
+        const { cachedSelectedValue, value } = this._adapter.getStates();
         const isRangeValueComplete = this._isRangeValueComplete(cachedSelectedValue);
         const newValue = isRangeValueComplete ? cachedSelectedValue : value;
         if (this._adapter.needConfirm() && !this._isControlledComponent()) {
@@ -1121,4 +1183,19 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
             this.openPanel();
         }
     }
+
+    handlePanelVisibleChange(visible: boolean) {
+        if (visible) {
+            this._adapter.setInsetInputFocus();
+            /**
+             * After the panel is closed, the trigger input is disabled
+             * 面板关闭后，trigger input 禁用
+             */
+            setTimeout(() => {
+                this._adapter.setTriggerDisabled(true);
+            }, 0);
+        } else {
+            this._adapter.setTriggerDisabled(false);
+        }
+    }
 }