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

package/datePicker/inputFoundation.ts

@@ -1,8 +1,13 @@
 /* eslint-disable max-len */
+import { cloneDeep, isObject, set } from 'lodash';
+
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { BaseValueType, ValidateStatus, ValueType } from './foundation';
+import { BaseValueType, ValidateStatus } from './foundation';
 import { formatDateValues } from './_utils/formatter';
 import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
+import getInsetInputFormatToken from './_utils/getInsetInputFormatToken';
+import getInsetInputValueFromInsetInputStr from './_utils/getInsetInputValueFromInsetInputStr';
+import { strings } from './constants';
 
 const KEY_CODE_ENTER = 'Enter';
 const KEY_CODE_TAB = 'Tab';
@@ -10,6 +15,7 @@ const KEY_CODE_TAB = 'Tab';
 
 export type Type = 'date' | 'dateRange' | 'year' | 'month' | 'dateTime' | 'dateTimeRange';
 export type RangeType = 'rangeStart' | 'rangeEnd';
+export type PanelType = 'left' | 'right';
 
 export interface DateInputEventHandlerProps {
     onClick?: (e: any) => void;
@@ -20,6 +26,7 @@ export interface DateInputEventHandlerProps {
     onClear?: (e: any) => void;
     onRangeInputClear?: (e: any) => void;
     onRangeEndTabPress?: (e: any) => void;
+    onInsetInputChange?: (options: InsetInputChangeProps) => void;
 }
 
 export interface DateInputElementProps {
@@ -29,7 +36,7 @@ export interface DateInputElementProps {
 
 export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
     [x: string]: any;
-    value?: ValueType;
+    value?: BaseValueType[];
     disabled?: boolean;
     type?: Type;
     showClear?: boolean;
@@ -39,12 +46,41 @@ 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'];
@@ -109,9 +145,9 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
         this._adapter.notifyRangeInputFocus(e, rangeType);
     }
 
-    formatShowText(value: BaseValueType[]) {
+    formatShowText(value: BaseValueType[], customFormat?: string) {
         const { type, dateFnsLocale, format, rangeSeparator } = this._adapter.getProps();
-        const formatToken = format || getDefaultFormatTokenByType(type);
+        const formatToken = customFormat || format || getDefaultFormatTokenByType(type);
         let text = '';
         switch (type) {
             case 'date':
@@ -134,4 +170,97 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
         }
         return text;
     }
+
+    handleInsetInputChange(options: InsetInputChangeFoundationProps) {
+        const { value, valuePath, insetInputValue } = options;
+        const { format, type } = this._adapter.getProps();
+        const insetFormatToken = getInsetInputFormatToken({ type, format });
+        const newInsetInputValue = set(cloneDeep(insetInputValue), valuePath, value);
+        const newInputValue = this.concatInsetInputValue({ insetInputValue: newInsetInputValue });
+        this._adapter.notifyInsetInputChange({ insetInputValue: newInsetInputValue, format: insetFormatToken, insetInputStr: newInputValue });
+    }
+
+    /**
+     * 只有传入的 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() {
+        const { type, format } = this._adapter.getProps();
+        const insetInputFormat = getInsetInputFormatToken({ type, format });
+        let datePlaceholder, timePlaceholder;
+
+        switch (type) {
+            case 'date':
+            case 'month':
+            case 'dateRange':
+                datePlaceholder = insetInputFormat;
+                break;
+            case 'dateTime':
+            case 'dateTimeRange':
+                [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
+                break;
+        }
+
+        return ({
+            datePlaceholder,
+            timePlaceholder,
+        });
+    }
+
+    /**
+     * 从当前日期值或 inputValue 中解析出 insetInputValue
+     * 
+     * Parse out insetInputValue from current date value or inputValue
+     */
+    getInsetInputValue({ value, insetInputValue } : { value: BaseValueType[]; insetInputValue: InsetInputValue }) {
+        const { type, rangeSeparator, format } = this._adapter.getProps();
+
+        let inputValueStr = '';
+        if (isObject(insetInputValue)) {
+            inputValueStr = this.concatInsetInputValue({ insetInputValue });
+        } else {
+            const insetInputFormat = getInsetInputFormatToken({ format, type });
+            inputValueStr = this.formatShowText(value, insetInputFormat);
+        }
+
+        const newInsetInputValue = getInsetInputValueFromInsetInputStr({ inputValue: inputValueStr, type, rangeSeparator });
+        return newInsetInputValue;
+    }
+
+    concatInsetDateAndTime({ date, time }) {
+        return `${date} ${time}`;
+    }
+
+    concatInsetDateRange({ rangeStart, rangeEnd }) {
+        const { rangeSeparator } = this._adapter.getProps();
+        return `${rangeStart}${rangeSeparator}${rangeEnd}`;
+    }
+
+    concatInsetInputValue({ insetInputValue }: { insetInputValue: InsetInputValue }) {
+        const { type } = this._adapter.getProps();
+        let inputValue = '';
+
+        switch (type) {
+            case 'date':
+            case 'month':
+                inputValue = insetInputValue.monthLeft.dateInput;
+                break;
+            case 'dateRange':
+                inputValue = this.concatInsetDateRange({ rangeStart: insetInputValue.monthLeft.dateInput, rangeEnd: insetInputValue.monthRight.dateInput });
+                break;
+            case 'dateTime':
+                inputValue = this.concatInsetDateAndTime({ date: insetInputValue.monthLeft.dateInput, time: insetInputValue.monthLeft.timeInput });
+                break;
+            case 'dateTimeRange':
+                const rangeStart = this.concatInsetDateAndTime({ date: insetInputValue.monthLeft.dateInput, time: insetInputValue.monthLeft.timeInput });
+                const rangeEnd = this.concatInsetDateAndTime({ date: insetInputValue.monthRight.dateInput, time: insetInputValue.monthRight.timeInput });
+                inputValue = this.concatInsetDateRange({ rangeStart, rangeEnd });
+                break;
+        }
+
+        return inputValue;
+    }
 }

package/datePicker/monthsGridFoundation.ts

@@ -86,6 +86,7 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     isAnotherPanelHasOpened?: (currentRangeInput: 'rangeStart' | 'rangeEnd') => boolean;
     focusRecordsRef?: any;
     triggerRender?: (props: Record<string, any>) => any;
+    insetInput: boolean;
 }
 
 export interface MonthInfo {
@@ -218,6 +219,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     _initDatePickerFromValue(values: BaseValueType[], refreshPicker = true) {
         const monthLeft = this.getState('monthLeft');
         const newMonthLeft = { ...monthLeft };
+        // REMOVE:
         this._adapter.updateMonthOnLeft(newMonthLeft);
         const newSelected = new Set<string>();
         if (!this._isMultiple()) {
@@ -230,6 +232,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         if (refreshPicker) {
             this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
         } else {
+            // FIXME:
             this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, newMonthLeft.pickerDate);
         }
         this._adapter.updateDaySelected(newSelected);
@@ -534,6 +537,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     ) {
         const { multiple, disabledDate } = this.getProps();
         const { selected: selectedSet, rangeStart, rangeEnd } = this.getStates();
+        // FIXME:
         const includeRange = ['dateRange', 'dateTimeRange'].includes(type);
         const options = { closePanel: false };
         if (!multiple && !includeRange && selectedSet.size) {

package/datePicker/rtl.scss

@@ -181,5 +181,13 @@ $module: #{$prefix}-datepicker;
             padding-left: $spacing-datepicker_footer_compact-paddintRight;
             padding-right: auto;
         }
+
+        .#{$module}-inset-input {
+            &-separator {
+                border-right: $width-datepicker-border solid $color-datepicker_border-bg-default;
+                border-left: 0;
+                transform: translateX(-50%);
+            }
+        }
     }
 }

package/datePicker/variables.scss

@@ -23,6 +23,14 @@ $width-datepicker_quick_control-borderRadius: var(--semi-border-radius-medium);
 $width-datepicker_slot-border: 1px; // 日期星期分割线宽度
 $width-datepicker_range_input-border: $border-thickness-control-focus;
 $width-datepicker_day_main-border: 1px;
+$height-datepicker_timeType_insetInput_yam: 100%; // 时间面板高度 - 内嵌输入框
+$height-datepicker_timeType_insetInput_tpk: 100%; // 时间面板高度 - 内嵌输入框
+$width-datepicker_insetInput_date_type_wrapper: 284px; // 日期类型内嵌输入框宽度
+$width-datepicker_insetInput_date_range_type_wrapper: $width-datepicker_insetInput_date_type_wrapper * 2; // 范围选择内嵌输入框宽度
+$width-datepicker_insetInput_month_type_wrapper: 204px; // 月份类型内嵌输入框宽度
+$height-datepicker_insetInput_separator: 32px;
+$height-datepicker_month_grid_yearType_insetInput: 312px;
+$height-datepicker_month_grid_timeType_insetInput: 314px;
 
 // Spacing
 $spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) / 2; // 日期格子水平外边距
@@ -53,6 +61,14 @@ $spacing-datepicker_range_input_suffix-paddingLeft: 8px;
 $spacing-datepicker_range_input_suffix-paddingRight: 12px;
 $spacing-datepicker_range_input_clearbtn-paddingLeft: 8px;
 $spacing-datepicker_range_input_clearbtn-paddingRight: 12px;
+$spacing-datepicker_navigation_insetInput-paddingY: 8px; // 年月切换 header 垂直内边距 - 内嵌输入框
+$spacing-datepicker_insetInput_wrapper-margin: 8px;
+$spacing-datepicker_insetInput_wrapper-paddingY: 12px;
+$spacing-datepicker_insetInput_wrapper-paddingX: 16px;
+$spacing-datepicker_insetInput_wrapper-paddingBottom: 0;
+$spacing-datepicker_insetInput_separator-paddingY: 0;
+$spacing-datepicker_insetInput_separator-paddingX: 4px;
+
 
 // Color
 $color-datepicker_panel-bg-default: var(--semi-color-bg-3); // 日期选择器背景颜色
@@ -118,6 +134,7 @@ $color-datepicker_range_input_inputWrapper-bg-default: transparent;
 $color-datepicker_range_input_inputWrapper-bg-focus: var(--semi-color-fill-1);
 $color-datepicker_range_input_separator-text-active: var(--semi-color-text-0);
 $color-datepicker_day_main-border: var(--semi-color-primary-active);
+$color-datepicker_insetInput_separator: var(--semi-color-text-3);
 
 // Font
 $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight: 600;
@@ -144,9 +161,17 @@ $radius-datepicker_range_input_inputWrapper: var(--semi-border-radius-small);
 $height-datepicker_range_input-default: 32px;
 $height-datepicker_range_input-small: 24px;
 $height-datepicker_range_input-large: 40px;
+$width-datepicker_insetInput_date_type_wrapper_compact: 216px;
+$width-datepicker_insetInput_date_range_type_wrapper_compact: $width-datepicker_insetInput_date_type_wrapper_compact * 2;
+$width-datepicker_insetInput_month_type_wrapper_compact: 195px;
+$height-datepicker_insetInput_tpk_compact: 100%;
+$height-datepicker_timeType_insetInput_yam_compact: 100%;
+$height-datepicker_insetInput_wrapper_compact: 28px;
 
 $lineHeight-datepicker_compact: 20px;
 $lineHeight-datepicker_weekday_item_compact: 28px;
+$height-datepicker_insetInput_compact: 26px;
+$fontSize-datepicker_insetInput_compact-fontSize: 12px;
 
 $spacing-datepicker_switch_compact-padding: 6px;
 $spacing-datepicker_day_compact-margin: ($width-datepicker_day_compact - $width-datepicker_day_main_compact) / 2;
@@ -163,6 +188,11 @@ $spacing-datepicker_footer_compact-paddintBottom: 10px;
 $spacing-datepicker_footer_compact-paddintRight: 8px;
 $spacing-datepicker_scrolllist_shade_pre_compact-marginTop: -17px;
 $spacing-datepicker_scrolllist_shade_post_compact-marginTop: 17px;
+$spacing-datepicker_insetInput_wrapper_compact-margin: 4px;
+$spacing-datepicker_insetInput_wrapper_compact-paddingY: 8px;
+$spacing-datepicker_insetInput_wrapper_compact-paddingX: 8px;
+$spacing-datepicker_insetInput_wrapper_compact-paddingBottom: 0;
+$spacing-datepicker_insetInput_wrapper_rangeType_compact-paddingTop: 0;
 
 // Radius
 $radius-datepicker_range_input: var(--semi-border-radius-small);

package/lib/cjs/button/constants.d.ts

@@ -1,6 +1,14 @@
 declare const cssClasses: {
     PREFIX: string;
 };
-declare const strings: Record<string, any>;
+declare const strings: {
+    readonly sizes: readonly ["default", "small", "large"];
+    readonly iconPositions: readonly ["left", "right"];
+    readonly htmlTypes: readonly ["button", "reset", "submit"];
+    readonly btnTypes: readonly ["primary", "secondary", "tertiary", "warning", "danger"];
+    readonly themes: readonly ["solid", "borderless", "light"];
+    readonly DEFAULT_ICON_SIZE: "default";
+    readonly DEFAULT_ICON_POSITION: "left";
+};
 declare const numbers: {};
 export { cssClasses, strings, numbers };

package/lib/cjs/datePicker/_utils/formatter.d.ts

@@ -8,7 +8,7 @@ import { BaseValueType } from '../foundation';
  * @returns {string}
  */
 export declare function formatDateValues(values: BaseValueType[], formatToken: string, { groupInnerSeparator, groupSize, groupSeparator, }: {
-    groupInnerSeparator?: " ~ ";
+    groupInnerSeparator?: string;
     groupSize?: number;
-    groupSeparator?: ",";
+    groupSeparator?: string;
 }, locale: any): string;

package/lib/cjs/datePicker/_utils/getInsetInputFormatToken.d.ts

@@ -0,0 +1,20 @@
+import { strings } from '../constants';
+/**
+ * 获取 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];
+}): string;

package/lib/cjs/datePicker/_utils/getInsetInputFormatToken.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = getInsetInputFormatToken;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _getDefaultFormatToken = require("./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'
+ */
+function getInsetInputFormatToken(options) {
+  var _context;
+
+  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 = (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
+  let insetInputFormat;
+
+  switch (type) {
+    case 'dateTime':
+    case 'dateTimeRange':
+      const dateTimeResult = dateTimeReg.exec(format);
+      insetInputFormat = dateTimeResult && dateTimeResult[1] && dateTimeResult[2] ? (0, _concat.default)(_context = "".concat(dateTimeResult[1], " ")).call(_context, 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/lib/cjs/datePicker/_utils/getInsetInputValueFromInsetInputStr.d.ts

@@ -0,0 +1,31 @@
+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];
+}): {
+    monthLeft: {
+        dateInput: string;
+        timeInput: string;
+    };
+    monthRight: {
+        dateInput: string;
+        timeInput: string;
+    };
+};

package/lib/cjs/datePicker/_utils/getInsetInputValueFromInsetInputStr.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = getInsetInputValueFromInsetInputStr;
+
+/**
+ * 从 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' } }
+ * ```
+ */
+function getInsetInputValueFromInsetInputStr(options) {
+  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/lib/cjs/datePicker/constants.d.ts

@@ -41,10 +41,12 @@ declare const strings: {
     readonly PANEL_TYPE_RIGHT: "right";
     readonly STATUS: readonly ["default", "error", "warning", "success"];
     readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
+    readonly POSITION_INLINE_INPUT: "leftTopOver";
 };
 declare const numbers: {
     readonly WEEK_START_ON: 0;
     readonly WEEK_HEIGHT: 36;
     readonly SPACING: number;
+    readonly SPACING_INSET_INPUT: 1;
 };
 export { cssClasses, strings, numbers };

package/lib/cjs/datePicker/constants.js

@@ -63,13 +63,14 @@ const strings = (0, _assign.default)({
   PANEL_TYPE_LEFT: 'left',
   PANEL_TYPE_RIGHT: 'right',
   STATUS: _constants.VALIDATE_STATUS,
-  POSITION_SET: _constants2.strings.POSITION_SET
+  POSITION_SET: _constants2.strings.POSITION_SET,
+  POSITION_INLINE_INPUT: 'leftTopOver'
 }, formatToken);
 exports.strings = strings;
 const numbers = {
   WEEK_START_ON: 0,
   WEEK_HEIGHT: 36,
-  SPACING: _constants2.numbers.SPACING // Floating distance trigger interval
-
+  SPACING: _constants2.numbers.SPACING,
+  SPACING_INSET_INPUT: 1
 };
 exports.numbers = numbers;