@douyinfe/semi-foundation 2.5.1 → 2.7.0-beta.0

package/lib/cjs/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/lib/cjs/datePicker/foundation.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './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';
@@ -70,6 +70,7 @@ export interface RenderProps {
     renderFullDate?: RenderFullDateType;
     triggerRender?: TriggerRenderType;
 }
+export declare type RangeType = 'rangeStart' | 'rangeEnd' | false;
 export interface EventHandlerProps {
     onCancel?: OnCancelType;
     onChange?: OnChangeType;
@@ -78,7 +79,7 @@ export interface EventHandlerProps {
     onConfirm?: OnConfirmType;
     onBlur?: (e: any) => void;
     onClear?: (e: any) => void;
-    onFocus?: (e: any, rangType: 'rangeStart' | 'rangeEnd') => void;
+    onFocus?: (e: any, rangType: RangeType) => void;
     onPresetClick?: OnPresetClickType;
 }
 export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps {
@@ -130,17 +131,20 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     dateFnsLocale?: any;
     localeCode?: string;
     rangeSeparator?: string;
+    insetInput?: boolean;
 }
 export interface DatePickerFoundationState {
     panelShow: boolean;
     isRange: boolean;
     inputValue: string;
-    value: ValueType;
-    cachedSelectedValue: ValueType;
+    value: Date[];
+    cachedSelectedValue: Date[];
     prevTimeZone: string | number;
     motionEnd: boolean;
-    rangeInputFocus: 'rangeStart' | 'rangeEnd' | boolean;
+    rangeInputFocus: RangeType;
     autofocus: boolean;
+    insetInputValue: InsetInputValue;
+    triggerDisabled: boolean;
 }
 export { Type, DateInputFoundationProps };
 export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationProps, DatePickerFoundationState> {
@@ -155,9 +159,9 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
     notifyConfirm: DatePickerFoundationProps['onConfirm'];
     notifyOpenChange: DatePickerFoundationProps['onOpenChange'];
     notifyPresetsClick: DatePickerFoundationProps['onPresetClick'];
-    updateValue: (value: ValueType) => void;
+    updateValue: (value: Date[]) => void;
     updatePrevTimezone: (prevTimeZone: string | number) => void;
-    updateCachedSelectedValue: (cachedSelectedValue: ValueType) => void;
+    updateCachedSelectedValue: (cachedSelectedValue: Date[]) => void;
     updateInputValue: (inputValue: string) => void;
     needConfirm: () => boolean;
     typeIsYearOrMonth: () => boolean;
@@ -165,6 +169,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;
 }
 /**
  * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
@@ -207,6 +214,10 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * clear input value when selected date is not confirmed
      */
     needConfirmSideEffectsWhenClosePanel(willUpdateDates: Date[] | null | undefined): void;
+    /**
+     * clear inset input value when close panel
+     */
+    clearInsetInputValue(): void;
     resetCachedSelectedValue(willUpdateDates?: Date[]): void;
     /**
      * timing to call closePanel
@@ -233,6 +244,17 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Event} e
      */
     handleInputChange(input: string, e: any): void;
+    /**
+     * inset input 变化时需要更新以下 state 状态
+     *  - insetInputValue（总是）
+     *  - inputValue（可以解析为合法日期时）
+     *  - value（可以解析为合法日期时）
+     */
+    handleInsetInputChange(options: {
+        insetInputStr: string;
+        format: string;
+        insetInputValue: InsetInputValue;
+    }): void;
     /**
      * Input box blur
      * @param {String} input
@@ -250,7 +272,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {String} range 'rangeStart' or 'rangeEnd', use when type is range
      */
     handleInputFocus(e: any, range: 'rangeStart' | 'rangeEnd'): void;
-    handleSetRangeFocus(rangeInputFocus: boolean | 'rangeStart' | 'rangeEnd'): void;
+    handleSetRangeFocus(rangeInputFocus: RangeType): void;
     handleInputClear(e: any): void;
     /**
      * 范围选择清除按钮回调
@@ -269,7 +291,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {string} input
      * @returns  {Date [] | '}
      */
-    parseInput(input?: string): Date[];
+    parseInput(input?: string, format?: string): Date[];
     /**
      * Parses the input when multiple is true, if valid,
      *  returns a list of time objects, otherwise returns an array
@@ -286,14 +308,14 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Date[]} dates
      * @returns {string}
      */
-    formatDates(dates?: Date[]): string;
+    formatDates(dates?: Date[], customFormat?: string): string;
     /**
      * dates[] => string
      *
      * @param {Date[]} dates
      * @returns {string}
      */
-    formatMultipleDates(dates?: Date[], separator?: string): string;
+    formatMultipleDates(dates?: Date[], separator?: string, customFormat?: string): string;
     /**
      * Update date value and the value of the input box
      * 1. Select Update
@@ -414,4 +436,5 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @returns
      */
     handleTriggerWrapperClick(e: any): void;
+    handlePanelVisibleChange(visible: boolean): void;
 }

package/lib/cjs/datePicker/foundation.js

@@ -64,6 +64,10 @@ var _constants = require("./constants");
 
 var _constants2 = require("../input/constants");
 
+var _getInsetInputFormatToken = _interopRequireDefault(require("./_utils/getInsetInputFormatToken"));
+
+var _getInsetInputValueFromInsetInputStr = _interopRequireDefault(require("./_utils/getInsetInputValueFromInsetInputStr"));
+
 /* eslint-disable no-nested-ternary */
 
 /* eslint-disable max-len, max-depth,  */
@@ -298,6 +302,20 @@ class DatePickerFoundation extends _foundation.default {
       this.resetCachedSelectedValue(willUpdateDates);
     }
   }
+  /**
+   * clear inset input value when close panel
+   */
+
+
+  clearInsetInputValue() {
+    const {
+      insetInput
+    } = this._adapter.getProps();
+
+    if (insetInput) {
+      this._adapter.updateInsetInputValue(null);
+    }
+  }
 
   resetCachedSelectedValue(willUpdateDates) {
     const {
@@ -345,6 +363,7 @@ class DatePickerFoundation extends _foundation.default {
 
     this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates);
     this.needConfirmSideEffectsWhenClosePanel(willUpdateDates);
+    this.clearInsetInputValue();
 
     this._adapter.notifyOpenChange(false);
 
@@ -390,6 +409,52 @@ class DatePickerFoundation extends _foundation.default {
       this._adapter.updateInputValue(input);
     }
   }
+  /**
+   * inset input 变化时需要更新以下 state 状态
+   *  - insetInputValue（总是）
+   *  - inputValue（可以解析为合法日期时）
+   *  - value（可以解析为合法日期时）
+   */
+
+
+  handleInsetInputChange(options) {
+    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 (!(0, _isEqual2.default)(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
@@ -520,6 +585,7 @@ class DatePickerFoundation extends _foundation.default {
 
   parseInput() {
     let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let format = arguments.length > 1 ? arguments[1] : undefined;
     let result = []; // console.log(input);
 
     const {
@@ -529,7 +595,7 @@ class DatePickerFoundation extends _foundation.default {
 
     if (input && input.length) {
       const type = this.getProp('type');
-      const formatToken = this.getProp('format') || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
+      const formatToken = format || this.getProp('format') || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
       let parsedResult, formatedInput;
       const nowDate = new Date();
 
@@ -622,12 +688,13 @@ class DatePickerFoundation extends _foundation.default {
 
   formatDates() {
     let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let customFormat = arguments.length > 1 ? arguments[1] : undefined;
     let str = '';
     const rangeSeparator = this.getProp('rangeSeparator');
 
     if ((0, _isArray.default)(dates) && dates.length) {
       const type = this.getProp('type');
-      const formatToken = this.getProp('format') || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
+      const formatToken = customFormat || this.getProp('format') || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
 
       switch (type) {
         case 'date':
@@ -677,6 +744,7 @@ class DatePickerFoundation extends _foundation.default {
   formatMultipleDates() {
     let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.strings.DEFAULT_SEPARATOR_MULTIPLE;
+    let customFormat = arguments.length > 2 ? arguments[2] : undefined;
     const strs = [];
 
     if ((0, _isArray.default)(dates) && dates.length) {
@@ -686,13 +754,13 @@ class DatePickerFoundation extends _foundation.default {
         case 'date':
         case 'dateTime':
         case 'month':
-          (0, _forEach.default)(dates).call(dates, date => strs.push(this.formatDates([date])));
+          (0, _forEach.default)(dates).call(dates, 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((0, _slice.default)(dates).call(dates, i, i + 2)));
+            strs.push(this.formatDates((0, _slice.default)(dates).call(dates, i, i + 2), customFormat));
           }
 
           break;
@@ -742,7 +810,13 @@ class DatePickerFoundation extends _foundation.default {
 
 
   handleSelectedChange(value, options) {
-    const type = this.getProp('type');
+    const {
+      type,
+      format,
+      rangeSeparator,
+      insetInput
+    } = this._adapter.getProps();
+
     const {
       value: stateValue
     } = this.getStates();
@@ -767,10 +841,24 @@ class DatePickerFoundation extends _foundation.default {
 
     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 = (0, _getInsetInputFormatToken.default)({
+          format,
+          type
+        });
+        const insetInputStr = this._isMultiple() ? this.formatMultipleDates(dates, undefined, insetInputFormatToken) : this.formatDates(dates, insetInputFormatToken);
+        insetInputValue = (0, _getInsetInputValueFromInsetInputStr.default)({
+          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
@@ -785,15 +873,23 @@ class DatePickerFoundation extends _foundation.default {
           // 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); // if inputValue is not complete, don't notifyChange
+        this._adapter.updateInputValue(inputValue);
+
+        this._adapter.updateInsetInputValue(insetInputValue); // if inputValue is not complete, don't notifyChange
 
 
         if (isRangeTypeAndInputIncomplete) {
@@ -837,7 +933,7 @@ class DatePickerFoundation extends _foundation.default {
     const {
       cachedSelectedValue,
       value
-    } = this.getStates();
+    } = this._adapter.getStates();
 
     const isRangeValueComplete = this._isRangeValueComplete(cachedSelectedValue);
 
@@ -1204,6 +1300,23 @@ class DatePickerFoundation extends _foundation.default {
     }
   }
 
+  handlePanelVisibleChange(visible) {
+    if (visible) {
+      this._adapter.setInsetInputFocus();
+      /**
+       * After the panel is closed, the trigger input is disabled
+       * 面板关闭后，trigger input 禁用
+       */
+
+
+      (0, _setTimeout2.default)(() => {
+        this._adapter.setTriggerDisabled(true);
+      }, 0);
+    } else {
+      this._adapter.setTriggerDisabled(false);
+    }
+  }
+
 }
 
 exports.default = DatePickerFoundation;

package/lib/cjs/datePicker/inputFoundation.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { BaseValueType, ValidateStatus, ValueType } from './foundation';
+import { BaseValueType, ValidateStatus } from './foundation';
+import { strings } from './constants';
 export declare type Type = 'date' | 'dateRange' | 'year' | 'month' | 'dateTime' | 'dateTimeRange';
 export declare type RangeType = 'rangeStart' | 'rangeEnd';
+export declare type PanelType = 'left' | 'right';
 export interface DateInputEventHandlerProps {
     onClick?: (e: any) => void;
     onChange?: (value: string, e: any) => void;
@@ -12,6 +14,7 @@ export interface DateInputEventHandlerProps {
     onClear?: (e: any) => void;
     onRangeInputClear?: (e: any) => void;
     onRangeEndTabPress?: (e: any) => void;
+    onInsetInputChange?: (options: InsetInputChangeProps) => void;
 }
 export interface DateInputElementProps {
     insetLabel?: any;
@@ -19,10 +22,9 @@ export interface DateInputElementProps {
 }
 export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
     [x: string]: any;
-    value?: ValueType;
+    value?: BaseValueType[];
     disabled?: boolean;
     type?: Type;
-    multiple?: boolean;
     showClear?: boolean;
     format?: string;
     inputStyle?: React.CSSProperties;
@@ -30,11 +32,37 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     validateStatus?: ValidateStatus;
     prefixCls?: string;
     rangeSeparator?: string;
+    panelType?: PanelType;
+    insetInput?: boolean;
+    insetInputValue?: InsetInputValue;
+    density?: typeof strings.DENSITY_SET[number];
+}
+export interface InsetInputValue {
+    monthLeft: {
+        dateInput: string;
+        timeInput: string;
+    };
+    monthRight: {
+        dateInput: string;
+        timeInput: string;
+    };
+}
+export interface InsetInputChangeFoundationProps {
+    value: string;
+    insetInputValue: InsetInputValue;
+    event: any;
+    valuePath: string;
+}
+export interface InsetInputChangeProps {
+    insetInputStr: string;
+    format: string;
+    insetInputValue: InsetInputValue;
 }
 export interface DateInputAdapter extends DefaultAdapter {
     updateIsFocusing: (isFocusing: boolean) => void;
     notifyClick: DateInputFoundationProps['onClick'];
     notifyChange: DateInputFoundationProps['onChange'];
+    notifyInsetInputChange: DateInputFoundationProps['onInsetInputChange'];
     notifyEnter: DateInputFoundationProps['onEnterPress'];
     notifyBlur: DateInputFoundationProps['onBlur'];
     notifyClear: DateInputFoundationProps['onClear'];
@@ -55,5 +83,46 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
     handleRangeInputEnterPress(e: any, rangeInputValue: string): void;
     handleRangeInputEndKeyPress(e: any): void;
     handleRangeInputFocus(e: any, rangeType: RangeType): void;
-    formatShowText(value: BaseValueType[]): string;
+    formatShowText(value: BaseValueType[], customFormat?: string): string;
+    handleInsetInputChange(options: InsetInputChangeFoundationProps): void;
+    /**
+     * 只有传入的 format 符合 formatReg 时，才会使用用户传入的 format
+     * 否则会使用默认的 format 作为 placeholder
+     *
+     * The format passed in by the user will be used only if the incoming format conforms to formatReg
+     * Otherwise the default format will be used as placeholder
+     */
+    getInsetInputPlaceholder(): {
+        datePlaceholder: any;
+        timePlaceholder: any;
+    };
+    /**
+     * 从当前日期值或 inputValue 中解析出 insetInputValue
+     *
+     * Parse out insetInputValue from current date value or inputValue
+     */
+    getInsetInputValue({ value, insetInputValue }: {
+        value: BaseValueType[];
+        insetInputValue: InsetInputValue;
+    }): {
+        monthLeft: {
+            dateInput: string;
+            timeInput: string;
+        };
+        monthRight: {
+            dateInput: string;
+            timeInput: string;
+        };
+    };
+    concatInsetDateAndTime({ date, time }: {
+        date: any;
+        time: any;
+    }): string;
+    concatInsetDateRange({ rangeStart, rangeEnd }: {
+        rangeStart: any;
+        rangeEnd: any;
+    }): string;
+    concatInsetInputValue({ insetInputValue }: {
+        insetInputValue: InsetInputValue;
+    }): string;
 }