@douyinfe/semi-foundation 2.31.2 → 2.32.0-beta.0

package/lib/cjs/datePicker/foundation.js

@@ -127,9 +127,7 @@ class DatePickerFoundation extends _foundation.default {
     this._adapter.updatePrevTimezone(prevTimeZone); // reset input value when value update
 
 
-    this._adapter.updateInputValue(null);
-
-    this._adapter.updateInsetInputValue(null);
+    this.clearInputValue();
 
     this._adapter.updateValue(result);
 
@@ -216,7 +214,8 @@ class DatePickerFoundation extends _foundation.default {
 
   destroy() {
     // Ensure that event listeners will be uninstalled and users may not trigger closePanel
-    // this._adapter.togglePanel(false);
+    this._adapter.togglePanel(false);
+
     this._adapter.unregisterClickOutSide();
   }
 
@@ -235,52 +234,47 @@ class DatePickerFoundation extends _foundation.default {
   openPanel() {
     if (!this.getProp('disabled')) {
       if (!this._isControlledComponent('open')) {
-        this._adapter.togglePanel(true);
-
-        this._adapter.registerClickOutSide();
+        this.open();
       }
 
       this._adapter.notifyOpenChange(true);
     }
   }
   /**
+   * @deprecated
    * do these side effects when type is dateRange or dateTimeRange
    *   1. trigger input blur, if input value is invalid, set input value and state value to previous status
    *   2. set cachedSelectedValue using given dates(in needConfirm mode)
    *      - directly closePanel without click confirm will set cachedSelectedValue to state value
    *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
    */
+  // rangeTypeSideEffectsWhenClosePanel(inputValue: string, willUpdateDates: Date[]) {
+  //     if (this._isRangeType()) {
+  //         this._adapter.setRangeInputFocus(false);
+  //         /**
+  //          * inputValue is string when it is not disabled or can't parsed
+  //          * when inputValue is null, picker value will back to last selected value
+  //          */
+  //         this.handleInputBlur(inputValue);
+  //         this.resetCachedSelectedValue(willUpdateDates);
+  //     }
+  // }
 
-
-  rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates) {
-    if (this._isRangeType()) {
-      this._adapter.setRangeInputFocus(false);
-      /**
-       * inputValue is string when it is not disabled or can't parsed
-       * when inputValue is null, picker value will back to last selected value
-       */
-
-
-      this.handleInputBlur(inputValue);
-      this.resetCachedSelectedValue(willUpdateDates);
-    }
-  }
   /**
+   * @deprecated
    * clear input value when selected date is not confirmed
    */
+  // needConfirmSideEffectsWhenClosePanel(willUpdateDates: Date[] | null | undefined) {
+  //     if (this._adapter.needConfirm() && !this._isRangeType()) {
+  //         /**
+  //          * if `null` input element will show `cachedSelectedValue` formatted value（format in DateInput render）
+  //          * if `` input element will show `` directly
+  //          */
+  //         this._adapter.updateInputValue(null);
+  //         this.resetCachedSelectedValue(willUpdateDates);
+  //     }
+  // }
 
-
-  needConfirmSideEffectsWhenClosePanel(willUpdateDates) {
-    if (this._adapter.needConfirm() && !this._isRangeType()) {
-      /**
-       * if `null` input element will show `cachedSelectedValue` formatted value（format in DateInput render）
-       * if `` input element will show `` directly
-       */
-      this._adapter.updateInputValue(null);
-
-      this.resetCachedSelectedValue(willUpdateDates);
-    }
-  }
   /**
    * clear inset input value when close panel
    */
@@ -337,20 +331,114 @@ class DatePickerFoundation extends _foundation.default {
     const willUpdateDates = (0, _isNullOrUndefined.default)(dates) ? value : dates;
 
     if (!this._isControlledComponent('open')) {
-      this._adapter.togglePanel(false);
+      this.close();
+    } else {
+      this.resetInnerSelectedStates(willUpdateDates);
+    }
 
-      this._adapter.unregisterClickOutSide();
-    } // range type picker, closing panel requires the following side effects
+    this._adapter.notifyOpenChange(false);
+  }
 
+  open() {
+    this._adapter.togglePanel(true);
 
-    this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates);
-    this.needConfirmSideEffectsWhenClosePanel(willUpdateDates);
-    this.clearInsetInputValue();
+    this._adapter.registerClickOutSide();
+  }
 
-    this._adapter.notifyOpenChange(false);
+  close() {
+    this._adapter.togglePanel(false, () => this.resetInnerSelectedStates());
+
+    this._adapter.unregisterClickOutSide();
+  }
+
+  focus(focusType) {
+    if (this._isRangeType()) {
+      const rangeInputFocus = focusType !== null && focusType !== void 0 ? focusType : 'rangeStart';
+
+      this._adapter.setRangeInputFocus(rangeInputFocus);
+    } else {
+      this._adapter.setInputFocus();
+    }
+  }
+
+  blur() {
+    if (this._isRangeType()) {
+      this._adapter.setRangeInputBlur();
+    } else {
+      this._adapter.setInputBlur();
+    }
+  }
+  /**
+   * reset cachedSelectedValue, inputValue when close panel
+   */
+
+
+  resetInnerSelectedStates(willUpdateDates) {
+    const {
+      value
+    } = this._adapter.getStates();
+
+    const needResetCachedSelectedValue = !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
+
+    if (needResetCachedSelectedValue) {
+      this.resetCachedSelectedValue(value);
+    }
+
+    this.resetFocus();
+    this.clearInputValue();
+    this.clickConfirmButton = false;
+  }
+
+  resetFocus(e) {
+    this._adapter.setRangeInputFocus(false);
 
     this._adapter.notifyBlur(e);
   }
+  /**
+   * cachedSelectedValue can be `(Date|null)[]` or `null`
+   */
+
+
+  isCachedSelectedValueValid(dates) {
+    const cachedSelectedValue = dates || this._adapter.getState('cachedSelectedValue');
+
+    const {
+      type
+    } = this._adapter.getProps();
+
+    let isValid = true;
+
+    switch (true) {
+      case type === 'dateRange':
+      case type === 'dateTimeRange':
+        if (!this._isRangeValueComplete(cachedSelectedValue)) {
+          isValid = false;
+        }
+
+        break;
+
+      default:
+        const value = cachedSelectedValue === null || cachedSelectedValue === void 0 ? void 0 : cachedSelectedValue.filter(item => item);
+
+        if (!(Array.isArray(value) && value.length)) {
+          isValid = false;
+        }
+
+        break;
+    }
+
+    return isValid;
+  }
+  /**
+   * 将输入框内容置空
+   */
+
+
+  clearInputValue() {
+    this._adapter.updateInputValue(null);
+
+    this._adapter.updateInsetInputValue(null);
+  }
   /**
    * Callback when the content of the input box changes
    * Update the date panel if the changed value is a legal date, otherwise only update the input box
@@ -453,36 +541,12 @@ class DatePickerFoundation extends _foundation.default {
    * @param {String} input
    * @param {Event} e
    */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
 
 
   handleInputBlur() {
     let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     let e = arguments.length > 1 ? arguments[1] : undefined;
-    const parsedResult = input ? this._isMultiple() ? this.parseMultipleInput(input, ',', true) : this.parseInput(input) : [];
-    const stateValue = this.getState('value'); // console.log(input, parsedResult);
-
-    if (parsedResult && parsedResult.length) {
-      this._updateValueAndInput(parsedResult, input === '');
-    } else if (input === '') {
-      // if clear input, set input to `''`
-      this._updateValueAndInput('', true, '');
-    } else {
-      this._updateValueAndInput(stateValue);
-    }
-    /**
-     * 当不是范围类型且不需要确认时，使用 stateValue 重置 cachedSelectedValue
-     * 这样做的目的是，在输入非法值时，使用上次选中的值作为已选值
-     * needConfirm 或者 range type 时，我们在 close panel 时调用 resetCachedSelectedValue，这里不用重复调用
-     *
-     * Use stateValue to reset cachedSelectedValue when it is not a range type and does not require confirmation
-     * The purpose of this is to use the last selected value as the selected value when an invalid value is entered
-     * When needConfirm or range type, we call resetCachedSelectedValue when close panel, no need to call repeatedly here
-     */
-
-
-    if (!this._adapter.needConfirm() && !this._isRangeType()) {
-      this.resetCachedSelectedValue(stateValue);
-    }
   }
   /**
    * called when range type rangeEnd input tab press
@@ -617,6 +681,7 @@ class DatePickerFoundation extends _foundation.default {
 
         case 'dateRange':
         case 'dateTimeRange':
+        case 'monthRange':
           const separator = rangeSeparator;
           const values = input.split(separator);
           parsedResult = values && values.reduce((arr, cur) => {
@@ -840,6 +905,7 @@ class DatePickerFoundation extends _foundation.default {
 
         case 'dateRange':
         case 'dateTimeRange':
+        case 'monthRange':
           const startIsTruthy = !(0, _isNullOrUndefined.default)(dates[0]);
           const endIsTruthy = !(0, _isNullOrUndefined.default)(dates[1]);
 
@@ -888,6 +954,7 @@ class DatePickerFoundation extends _foundation.default {
 
         case 'dateRange':
         case 'dateTimeRange':
+        case 'monthRange':
           for (let i = 0; i < dates.length; i += 2) {
             strs.push(this.formatDates(dates.slice(i, i + 2), customFormat));
           }
@@ -1034,7 +1101,7 @@ class DatePickerFoundation extends _foundation.default {
     }
   }
   /**
-   * when changing the year and month through the panel when the type is year or month
+   * when changing the year and month through the panel when the type is year or month or monthRange
    * @param {*} item
    */
 
@@ -1046,15 +1113,23 @@ class DatePickerFoundation extends _foundation.default {
       currentMonth,
       currentYear
     } = item;
+    const {
+      type
+    } = this.getProps();
 
-    if (typeof currentMonth === 'number' && typeof currentYear === 'number') {
-      // Strings with only dates (e.g. "1970-01-01") will be treated as UTC instead of local time #1460
-      const date = new Date(currentYear, currentMonth - 1);
+    if (type === 'month') {
+      const date = new Date(currentYear['left'], currentMonth['left'] - 1);
       this.handleSelectedChange([date]);
+    } else {
+      const dateLeft = new Date(currentYear['left'], currentMonth['left'] - 1);
+      const dateRight = new Date(currentYear['right'], currentMonth['right'] - 1);
+      this.handleSelectedChange([dateLeft, dateRight]);
     }
   }
 
   handleConfirm() {
+    this.clickConfirmButton = true;
+
     const {
       cachedSelectedValue,
       value
@@ -1180,6 +1255,7 @@ class DatePickerFoundation extends _foundation.default {
 
       case 'dateRange':
       case 'dateTimeRange':
+      case 'monthRange':
         notifyValue = _value.map(v => v && this.localeFormat(v, formatToken));
         notifyDate = [..._value];
         break;

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

@@ -1,7 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { BaseValueType, ValidateStatus, ValueType } from './foundation';
 import { strings } from './constants';
-export declare type Type = 'date' | 'dateRange' | 'year' | 'month' | 'dateTime' | 'dateTimeRange';
+export declare type Type = 'date' | 'dateRange' | 'year' | 'month' | 'dateTime' | 'dateTimeRange' | 'monthRange';
 export declare type RangeType = 'rangeStart' | 'rangeEnd';
 export declare type PanelType = 'left' | 'right';
 export interface DateInputEventHandlerProps {

package/lib/cjs/datePicker/inputFoundation.js

@@ -132,6 +132,13 @@ class InputFoundation extends _foundation.default {
         text = (0, _formatter.formatDateValues)(value, formatToken, undefined, dateFnsLocale);
         break;
 
+      case 'monthRange':
+        text = (0, _formatter.formatDateValues)(value, formatToken, {
+          groupSize: 2,
+          groupInnerSeparator: rangeSeparator
+        }, dateFnsLocale);
+        break;
+
       default:
         break;
     }
@@ -248,7 +255,8 @@ class InputFoundation extends _foundation.default {
   getInsetInputPlaceholder() {
     const {
       type,
-      format
+      format,
+      rangeSeparator
     } = this._adapter.getProps();
 
     const insetInputFormat = (0, _getInsetInputFormatToken.default)({
@@ -267,6 +275,9 @@ class InputFoundation extends _foundation.default {
       case 'dateTime':
       case 'dateTimeRange':
         [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
+
+      case 'monthRange':
+        datePlaceholder = insetInputFormat + rangeSeparator + insetInputFormat;
         break;
     }
 
@@ -351,6 +362,7 @@ class InputFoundation extends _foundation.default {
     switch (type) {
       case 'date':
       case 'month':
+      case 'monthRange':
         inputValue = insetInputValue.monthLeft.dateInput;
         break;
 

package/lib/cjs/datePicker/variables.scss

@@ -9,6 +9,7 @@ $height-datepicker_timeType_tpk: calc(100% - 54px); // 时间面板高度
 $height-datepicker_panel_yam_scrolllist:  266px; // 时间滚动内容高度
 
 $width-datepicker_monthPanel_max: 284px; // 年月选择器最大宽度
+$width-datepicker_monthRangePanel_max: 384px; // 年月选择器最大宽度
 $height-datepicker_timepicker_header_min: 24px; // 年月选择 header 最小高度
 $width-datepicker_navigation_button_min: 32px; // header 按钮最小宽度
 $height-datepicker_yamShowing_min: 378px; // 日期时间选择器菜单最小高度
@@ -30,7 +31,8 @@ $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; // 月份类型内嵌输入框宽度
+$width-datepicker_insetInput_month_type_wrapper: 165px; // 月份类型内嵌输入框宽度
+$width-datepicker_insetInput_month_range_type_wrapper: 331px; // 年月范围类型内嵌输入框宽度
 $height-datepicker_insetInput_separator: 32px;
 $height-datepicker_month_grid_yearType_insetInput: 317px;
 $height-datepicker_month_grid_timeType_insetInput: 317px;
@@ -222,7 +224,7 @@ $transition-datepicker_range_input: background-color .16s ease-in-out;
 $width-datepicker_presetPanel_left_and_right_content: $width-datepicker_presetPanel_left_and_right - $spacing-datepicker_quick_control_content-paddingX * 2; // 左右方位快捷选择面板，内容宽度
 $width-datepicker_presetPanel_top_and_bottom_content_date: $width-datepicker_day * 7 + $spacing-datepicker_month-padding * 2 - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // date/dateTime下， 上下方位快捷选择面板内容宽度， 默认（284 - 40）px
 $width-datepicker_presetPanel_top_and_bottom_content_range: ($width-datepicker_day * 7 + $spacing-datepicker_month-padding * 2) * 2 - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // dateRange/dateTimeRange下， 上下方位快捷选择内容面板宽度，默认528px
-$width-datepicker_presetPanel_top_and_bottom_content_month: 194px - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // month下，上下方位快捷选择内容面板宽度， 默认154px
+$width-datepicker_presetPanel_top_and_bottom_content_month: 165px - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // month下，上下方位快捷选择内容面板宽度， 默认154px
 
 $height-datepicker_month_max: $width-datepicker_day * 7 + 1px; // 年月面板最大高度, 最多6 + 1行，再加上一个border宽度, 默认253px
 $height-datepicker_month_max_compact: $width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-paddingTop + $spacing-datepicker_weeks_compact-padding + $spacing-datepicker_weekday_compact-paddingBottom; // 年月面板最大高度, 最多6 + 1行，再加上padding，默认220px
@@ -233,7 +235,7 @@ $height-datepicker_presetPanel_left_and_right_except_content: 20px + $spacing-da
 // compact
 $width-datepicker_presetPanel_top_and_bottom_content_date_compact: $width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-padding * 2 - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX * 2; // date/dateTime下， 上下方位快捷选择面板内容宽度， 默认（216 - 20）px
 $width-datepicker_presetPanel_top_and_bottom_content_range_compact: ($width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-padding * 2) * 2 - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX * 2; // dateRange/dateTimeRange下， 上下方位快捷选择内容面板宽度，默认412px
-$width-datepicker_presetPanel_top_and_bottom_content_month_compact: 194px - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX  * 2; // month下，上下方位快捷选择内容面板宽度， 默认174px
+$width-datepicker_presetPanel_top_and_bottom_content_month_compact: 165px - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX  * 2; // month下，上下方位快捷选择内容面板宽度， 默认174px
 
 $height-datepicker_date_panel_compact: $height-datepicker_month_max_compact + $width-datepicker_nav_compact + $spacing-datepicker_nav_compact-padding; // compact，date/dateRange，面板渲染最大高度，默认256px
 $height-datepicker_date_time_panel_compact: $height-datepicker_date_panel_compact + $height-datepicker_switch_compact; // compact，dateTime/dateTImeRange，面板渲染最大高度，默认288px
@@ -242,7 +244,7 @@ $height-datepicker_presetPanel_left_and_right_except_content_compact: 20px + $sp
 $width-datepicker_presetPanel_left_and_right_two_col_button: ($width-datepicker_presetPanel_left_and_right_content - $spacing-datepicker_quick_control_item-margin) * 0.5; // 左右方位快捷选择面板，固定两列，按钮宽度
 $width-datepicker_presetPanel_top_and_bottom_three_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_date - $spacing-datepicker_quick_control_item-margin * 2) * 0.333; // 上下方位快捷选择面板，固定三列，按钮宽度
 $width-datepicker_presetPanel_top_and_bottom_five_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_range - $spacing-datepicker_quick_control_item-margin * 4) * 0.2; // 上下方位快捷选择面板，固定五列，按钮宽度
-$width-datepicker_presetPanel_top_and_bottom_two_col_button:($width-datepicker_presetPanel_top_and_bottom_content_month - $spacing-datepicker_quick_control_item-margin) * 0.5; // 上下方位快捷选择面板，固定两列，按钮宽度
+$width-datepicker_presetPanel_top_and_bottom_two_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_month - $spacing-datepicker_quick_control_item-margin) * 0.5; // 上下方位快捷选择面板，固定两列，按钮宽度
 
 // compact
 $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact: ($width-datepicker_presetPanel_top_and_bottom_content_date_compact - $spacing-datepicker_quick_control_item-margin * 2) * 0.333; // 上下方位快捷选择面板，固定三列，按钮宽度

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

@@ -1,11 +1,27 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { PresetPosition } from './foundation';
+import { ArrayElement } from '../utils/type';
+import { strings } from './constants';
+import { PanelType } from './monthsGridFoundation';
+declare type Type = ArrayElement<typeof strings.TYPE_SET>;
 export interface YearAndMonthFoundationProps {
-    currentYear?: number;
-    currentMonth?: number;
+    currentYear: {
+        left: number;
+        right: number;
+    };
+    currentMonth: {
+        left: number;
+        right: number;
+    };
     onSelect?: (obj: {
-        currentMonth: number;
-        currentYear: number;
+        currentMonth: {
+            left: number;
+            right: number;
+        };
+        currentYear: {
+            left: number;
+            right: number;
+        };
     }) => void;
     onBackToMain?: () => void;
     locale?: any;
@@ -18,6 +34,7 @@ export interface YearAndMonthFoundationProps {
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
     renderDateInput?: any;
+    type?: Type;
     yearAndMonthOpts?: any;
 }
 export interface YearAndMonthFoundationState {
@@ -29,14 +46,46 @@ export interface YearAndMonthFoundationState {
         value: number;
         month: number;
     }>;
-    currentYear: number;
-    currentMonth: number;
+    currentYear: {
+        left: number;
+        right: number;
+    };
+    currentMonth: {
+        left: number;
+        right: number;
+    };
 }
 export interface YearAndMonthAdapter extends DefaultAdapter<YearAndMonthFoundationProps, YearAndMonthFoundationState> {
-    setCurrentYear: (currentYear: number, cb?: () => void) => void;
-    setCurrentMonth: (currentMonth: number) => void;
-    notifySelectYear: (year: number) => void;
-    notifySelectMonth: (month: number) => void;
+    setCurrentYear: (currentYear: {
+        left: number;
+        right: number;
+    }, cb?: () => void) => void;
+    setCurrentMonth: (currentMonth: {
+        left: number;
+        right: number;
+    }) => void;
+    setCurrentYearAndMonth: (currentYear: {
+        left: number;
+        right: number;
+    }, currentMonth: {
+        left: number;
+        right: number;
+    }) => void;
+    notifySelectYear: (year: {
+        left: number;
+        right: number;
+    }) => void;
+    notifySelectMonth: (month: {
+        left: number;
+        right: number;
+    }) => void;
+    notifySelectYearAndMonth: (year: {
+        left: number;
+        right: number;
+    }, month: {
+        left: number;
+        right: number;
+    }) => void;
     notifyBackToMain: () => void;
 }
 export interface MonthScrollItem {
@@ -55,11 +104,15 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
     constructor(adapter: YearAndMonthAdapter);
     init(): void;
     destroy(): void;
-    selectYear(item: YearScrollItem): void;
-    selectMonth(item: MonthScrollItem): void;
+    selectYear(item: YearScrollItem, panelType?: PanelType): void;
+    selectMonth(item: MonthScrollItem, panelType?: PanelType): void;
     /**
      * After selecting a year, if the currentMonth is disabled, automatically select a non-disabled month
      */
-    autoSelectMonth(item: YearScrollItem): void;
+    autoSelectMonth(item: YearScrollItem, panelType: PanelType, year: {
+        left: number;
+        right: number;
+    }): void;
     backToMain(): void;
 }
+export {};

package/lib/cjs/datePicker/yearAndMonthFoundation.js

@@ -5,10 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
+
 var _dateFns = require("date-fns");
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _constants = require("./constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 class YearAndMonthFoundation extends _foundation.default {
@@ -22,18 +26,54 @@ class YearAndMonthFoundation extends _foundation.default {
 
   destroy() {}
 
-  selectYear(item) {
-    const year = item.value;
+  selectYear(item, panelType) {
+    // const year = item.value;
+    const {
+      currentYear,
+      currentMonth
+    } = this.getStates();
+    const {
+      type
+    } = this.getProps();
+    const left = _constants.strings.PANEL_TYPE_LEFT;
+    const right = _constants.strings.PANEL_TYPE_RIGHT;
+    const year = (0, _cloneDeep2.default)(currentYear);
+    year[panelType] = item.value; // make sure the right panel time is always less than the left panel time
+
+    if (type === 'monthRange') {
+      const isSameYearIllegalDate = year[left] === year[right] && currentMonth[left] > currentMonth[right];
+
+      if (panelType === left && item.value > year[right] || panelType === left && isSameYearIllegalDate) {
+        // 1. select left year and left year > right year
+        // 2. select left year, left year = right year, but left date > right date
+        year[right] = item.value + 1;
+      } else if (panelType === right && isSameYearIllegalDate) {
+        // 1. select right year, left year = right year, but left date > right date
+        year[left] = item.value - 1;
+      }
+    }
 
-    this._adapter.setCurrentYear(year, () => this.autoSelectMonth(item));
+    this._adapter.setCurrentYear(year, () => this.autoSelectMonth(item, panelType, year));
 
     this._adapter.notifySelectYear(year);
   }
 
-  selectMonth(item) {
+  selectMonth(item, panelType) {
+    const {
+      currentMonth,
+      currentYear
+    } = this.getStates();
     const {
-      month
-    } = item;
+      type
+    } = this.getProps();
+    const left = _constants.strings.PANEL_TYPE_LEFT;
+    const right = _constants.strings.PANEL_TYPE_RIGHT;
+    const month = (0, _cloneDeep2.default)(currentMonth);
+    month[panelType] = item.month; // make sure the right panel time is always less than the left panel time
+
+    if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
+      month[right] = item.month + 1;
+    }
 
     this._adapter.setCurrentMonth(month);
 
@@ -44,7 +84,7 @@ class YearAndMonthFoundation extends _foundation.default {
    */
 
 
-  autoSelectMonth(item) {
+  autoSelectMonth(item, panelType, year) {
     const {
       disabledDate,
       locale
@@ -56,14 +96,14 @@ class YearAndMonthFoundation extends _foundation.default {
     } = this._adapter.getStates();
 
     const currentDate = (0, _dateFns.setYear)(Date.now(), item.year);
-    const isCurrentMonthDisabled = disabledDate((0, _dateFns.setMonth)(currentDate, currentMonth - 1));
+    const isCurrentMonthDisabled = disabledDate((0, _dateFns.setMonth)(currentDate, currentMonth[panelType] - 1));
 
     if (isCurrentMonthDisabled) {
       const currentIndex = months.findIndex(_ref => {
         let {
           month
         } = _ref;
-        return month === currentMonth;
+        return month === currentMonth[panelType];
       });
       let validMonth; // First look in the back, if you can't find it in the back, then look in the front
 
@@ -84,11 +124,12 @@ class YearAndMonthFoundation extends _foundation.default {
       }
 
       if (validMonth) {
-        this.selectMonth({
-          month: validMonth.month,
-          value: locale.fullMonths[validMonth.month],
-          disabled: false
-        });
+        const month = (0, _cloneDeep2.default)(currentMonth);
+        month[panelType] = validMonth.month; // change year and month same time
+
+        this._adapter.setCurrentYearAndMonth(year, month);
+
+        this._adapter.notifySelectYearAndMonth(year, month);
       }
     }
   }

package/lib/cjs/modal/modal.css

@@ -67,6 +67,7 @@
 .semi-modal-content-fullScreen {
   border-radius: 0;
   border: none;
+  top: 0px;
 }
 .semi-modal-header {
   display: flex;

package/lib/cjs/modal/modal.scss

@@ -76,6 +76,7 @@ $module: #{$prefix}-modal;
     &-content-fullScreen {
         border-radius: $radius-modal_content_fullscreen;
         border: none;
+        top: $spacing-modal_content_fullscreen-top;
     }
 
     // &-close {

package/lib/cjs/modal/variables.scss

@@ -43,6 +43,7 @@ $spacing-modal_footer_button-marginLeft: $spacing-base-tight; // 模态框 foote
 $spacing-modal_footer_button-marginRight: 0; // 模态框 footer 按钮右侧外边距
 $spacing-modal_confirm_header-marginBottom: 8px; // 命令式调用模态框 header 底部外边距
 $spacing-modal_confirm_icon_wrapper-marginRight: $spacing-base-tight; // 命令式调用模态框图标右侧外边距
+$spacing-modal_content_fullscreen-top: 0px; // 模态框内容全屏顶部位置
 
 // Width/Height
 $width-modal_title: 100%; // 模态框标题宽度