@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/datePicker/monthsGridFoundation.js

@@ -1,8 +1,6 @@
 import _isEqual from "lodash/isEqual";
 import _isSet from "lodash/isSet";
 import _includes from "lodash/includes";
-
-/* eslint-disable max-len */
 import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
 import { format, set, addMonths, subMonths, subYears, addYears, differenceInCalendarMonths, differenceInCalendarYears, isSameDay, parseISO } from 'date-fns';
@@ -11,7 +9,7 @@ import { formatFullDate } from './_utils/getMonthTable';
 import { compatibleParse } from './_utils/parser';
 import { zonedTimeToUtc } from '../utils/date-fns-extra';
 import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
-import isNullOrUndefined from '../utils/isNullOrUndefined';
+import isValidTimeZone from './_utils/isValidTimeZone';
 const dateDiffFns = {
   month: differenceInCalendarMonths,
   year: differenceInCalendarYears
@@ -24,31 +22,26 @@ const dateCalcFns = {
 };
 export default class MonthsGridFoundation extends BaseFoundation {
   constructor(adapter) {
-    super(Object.assign({}, adapter)); // Date change data when double panels
-
+    super(Object.assign({}, adapter));
+    // Date change data when double panels
     this.newBiMonthPanelDate = [this.getState('monthLeft').pickerDate, this.getState('monthRight').pickerDate];
   }
-
   init() {
     const defaultValue = this.getProp('defaultValue');
     this.initDefaultPickerValue();
     this.updateSelectedFromProps(defaultValue);
   }
-
   initDefaultPickerValue() {
     const defaultPickerValue = compatibleParse(this.getProp('defaultPickerValue'));
-
     if (defaultPickerValue && isValidDate(defaultPickerValue)) {
       this._updatePanelDetail(strings.PANEL_TYPE_LEFT, {
         pickerDate: defaultPickerValue
       });
-
       this._updatePanelDetail(strings.PANEL_TYPE_RIGHT, {
         pickerDate: addMonths(defaultPickerValue, 1)
       });
     }
   }
-
   updateSelectedFromProps(values) {
     let refreshPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const type = this.getProp('type');
@@ -57,29 +50,20 @@ export default class MonthsGridFoundation extends BaseFoundation {
       rangeStart,
       rangeEnd
     } = this.getStates();
-
-    if (values && values.length) {
+    if (values && (values === null || values === void 0 ? void 0 : values.length)) {
       switch (type) {
         case 'date':
           this._initDatePickerFromValue(values, refreshPicker);
-
           break;
-
         case 'dateRange':
           this._initDateRangePickerFromValue(values);
-
           break;
-
         case 'dateTime':
           this._initDateTimePickerFromValue(values);
-
           break;
-
         case 'dateTimeRange':
           this._initDateTimeRangePickerFormValue(values);
-
           break;
-
         default:
           break;
       }
@@ -88,23 +72,19 @@ export default class MonthsGridFoundation extends BaseFoundation {
       if (_isSet(selected) && selected.size) {
         this._adapter.updateDaySelected(new Set());
       }
-
       if (rangeStart) {
         this._adapter.setRangeStart('');
       }
-
       if (rangeEnd) {
         this._adapter.setRangeEnd('');
       }
     }
   }
-
   calcDisabledTime(panelType) {
     const {
       disabledTime,
       type
     } = this.getProps();
-
     if (typeof disabledTime === 'function' && panelType && ['dateTime', 'dateTimeRange'].includes(type)) {
       const {
         rangeStart,
@@ -112,91 +92,94 @@ export default class MonthsGridFoundation extends BaseFoundation {
         monthLeft
       } = this.getStates();
       const selected = [];
-
       if (type === 'dateTimeRange') {
         if (rangeStart) {
           selected.push(rangeStart);
         }
-
         if (rangeStart && rangeEnd) {
           selected.push(rangeEnd);
         }
       } else if (monthLeft && monthLeft.showDate) {
         selected.push(monthLeft.showDate);
       }
-
       const selectedDates = selected.map(str => str instanceof Date ? str : parseISO(str));
       const cbDates = type === 'dateTimeRange' ? selectedDates : selectedDates[0];
       return disabledTime(cbDates, panelType);
     }
   }
-
   _initDatePickerFromValue(values) {
     let refreshPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    const monthLeft = this.getState('monthLeft');
-    const newMonthLeft = Object.assign({}, monthLeft); // REMOVE:
-
+    const {
+      monthLeft
+    } = this._adapter.getStates();
+    const newMonthLeft = Object.assign({}, monthLeft);
+    // REMOVE:
     this._adapter.updateMonthOnLeft(newMonthLeft);
-
     const newSelected = new Set();
-
-    if (!this._isMultiple()) {
+    const isMultiple = this._isMultiple();
+    if (!isMultiple) {
       values[0] && newSelected.add(format(values[0], strings.FORMAT_FULL_DATE));
     } else {
       values.forEach(date => {
         date && newSelected.add(format(date, strings.FORMAT_FULL_DATE));
       });
     }
-
     if (refreshPicker) {
-      this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+      if (isMultiple) {
+        const leftPickerDateInSelected = values === null || values === void 0 ? void 0 : values.some(item => item && differenceInCalendarMonths(item, monthLeft.pickerDate) === 0);
+        !leftPickerDateInSelected && this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+      } else {
+        this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+      }
     } else {
       // FIXME:
       this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, newMonthLeft.pickerDate);
     }
-
     this._adapter.updateDaySelected(newSelected);
   }
-
   _initDateRangePickerFromValue(values) {
     let withTime = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     // init month panel
     const monthLeft = this.getState('monthLeft');
     const monthRight = this.getState('monthRight');
-
     const adjustResult = this._autoAdjustMonth(Object.assign(Object.assign({}, monthLeft), {
       pickerDate: values[0] || monthLeft.pickerDate
     }), Object.assign(Object.assign({}, monthRight), {
       pickerDate: values[1] || monthRight.pickerDate
     }));
-
-    this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
-    this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate); // init range
-
+    const validValue = Array.isArray(values) && values.filter(item => item).length > 1;
+    if (validValue) {
+      this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+      this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+    } else {
+      const selectedDate = values.find(item => item);
+      // 如果日期不完整且输入日期不在面板范围内，则更新面板
+      if (selectedDate) {
+        const notLeftPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthLeft.pickerDate)) > 0;
+        const notRightPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthRight.pickerDate)) > 0;
+        if (notLeftPanelDate && notRightPanelDate) {
+          this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+          this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+        }
+      }
+    }
+    // init range
     const formatToken = withTime ? strings.FORMAT_DATE_TIME : strings.FORMAT_FULL_DATE;
     let rangeStart = values[0] && format(values[0], formatToken);
     let rangeEnd = values[1] && format(values[1], formatToken);
-
     if (this._isNeedSwap(rangeStart, rangeEnd)) {
       [rangeStart, rangeEnd] = [rangeEnd, rangeStart];
     }
-
     this._adapter.setRangeStart(rangeStart);
-
     this._adapter.setRangeEnd(rangeEnd);
-
     this._adapter.setHoverDay(rangeEnd);
   }
-
   _initDateTimePickerFromValue(values) {
     this._initDatePickerFromValue(values);
   }
-
   _initDateTimeRangePickerFormValue(values) {
     this._initDateRangePickerFromValue(values, true);
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  }
   destroy() {}
   /**
    * sync change another panel month when change months from the else yam panel
@@ -207,23 +190,18 @@ export default class MonthsGridFoundation extends BaseFoundation {
    *  - panelType=right, target=new Date('2022-09-01') and left panel is in '2022-09' => call it, left panel minus one month to '2022-08'
    *  - panelType=left, target=new Date('2021-12-01') and right panel is in '2021-12' => call it, right panel add one month to '2021-01'
    */
-
-
   handleSyncChangeMonths(options) {
     const {
       panelType,
       target
     } = options;
-
     const {
       type
     } = this._adapter.getProps();
-
     const {
       monthLeft,
       monthRight
     } = this._adapter.getStates();
-
     if (this.isRangeType(type)) {
       if (panelType === 'right' && differenceInCalendarMonths(target, monthLeft.pickerDate) === 0) {
         this.handleYearOrMonthChange('prevMonth', 'left', 1, true);
@@ -235,56 +213,42 @@ export default class MonthsGridFoundation extends BaseFoundation {
   /**
    * Get the target date based on the panel type and switch type
    */
-
-
   getTargetChangeDate(options) {
     const {
       panelType,
       switchType
     } = options;
-
     const {
       monthRight,
       monthLeft
     } = this._adapter.getStates();
-
     const currentDate = panelType === 'left' ? monthLeft.pickerDate : monthRight.pickerDate;
     let target;
-
     switch (switchType) {
       case 'prevMonth':
         target = addMonths(currentDate, -1);
         break;
-
       case 'nextMonth':
         target = addMonths(currentDate, 1);
         break;
-
       case 'prevYear':
         target = addYears(currentDate, -1);
         break;
-
       case 'nextYear':
         target = addYears(currentDate, 1);
         break;
     }
-
     return target;
   }
   /**
    * Change month by yam panel
    */
-
-
   toMonth(panelType, target) {
     const {
       type
     } = this._adapter.getProps();
-
     const diff = this._getDiff('month', target, panelType);
-
     this.handleYearOrMonthChange(diff < 0 ? 'prevMonth' : 'nextMonth', panelType, Math.abs(diff), false);
-
     if (this.isRangeType(type)) {
       this.handleSyncChangeMonths({
         panelType,
@@ -292,18 +256,14 @@ export default class MonthsGridFoundation extends BaseFoundation {
       });
     }
   }
-
   toYear(panelType, target) {
     const diff = this._getDiff('year', target, panelType);
-
     this.handleYearOrMonthChange(diff < 0 ? 'prevYear' : 'nextYear', panelType, Math.abs(diff), false);
   }
-
   toYearMonth(panelType, target) {
     this.toYear(panelType, target);
     this.toMonth(panelType, target);
   }
-
   isRangeType(type) {
     const {
       type: typeFromProp
@@ -311,14 +271,13 @@ export default class MonthsGridFoundation extends BaseFoundation {
     const realType = type ? type : typeFromProp;
     return typeof realType === 'string' && /range/i.test(realType);
   }
-
   handleSwitchMonthOrYear(switchType, panelType) {
     const {
       type,
       syncSwitchMonth
     } = this.getProps();
-    const rangeType = this.isRangeType(type); // range type and syncSwitchMonth, we should change panels at same time
-
+    const rangeType = this.isRangeType(type);
+    // range type and syncSwitchMonth, we should change panels at same time
     if (rangeType && syncSwitchMonth) {
       this.handleYearOrMonthChange(switchType, 'left', 1, true);
       this.handleYearOrMonthChange(switchType, 'right', 1, true);
@@ -329,7 +288,6 @@ export default class MonthsGridFoundation extends BaseFoundation {
        * In order to prevent the two panels from being the same month, this will confuse the user when selecting the range
        * https://github.com/DouyinFE/semi-design/issues/260
        */
-
       if (rangeType) {
         const target = this.getTargetChangeDate({
           panelType,
@@ -342,34 +300,26 @@ export default class MonthsGridFoundation extends BaseFoundation {
       }
     }
   }
-
   prevMonth(panelType) {
     this.handleSwitchMonthOrYear('prevMonth', panelType);
   }
-
   nextMonth(panelType) {
     this.handleSwitchMonthOrYear('nextMonth', panelType);
   }
-
   prevYear(panelType) {
     this.handleSwitchMonthOrYear('prevYear', panelType);
   }
-
   nextYear(panelType) {
     this.handleSwitchMonthOrYear('nextYear', panelType);
   }
   /**
    * Calculate the year and month difference
    */
-
-
   _getDiff(type, target, panelType) {
     const panelDetail = this._getPanelDetail(panelType);
-
     const diff = dateDiffFns[type] && dateDiffFns[type](target, panelDetail.pickerDate);
     return diff;
   }
-
   _getPanelDetail(panelType) {
     return panelType === strings.PANEL_TYPE_RIGHT ? this.getState('monthRight') : this.getState('monthLeft');
   }
@@ -380,23 +330,12 @@ export default class MonthsGridFoundation extends BaseFoundation {
    * @param {String} token
    * @returns
    */
-
-
   localeFormat(date, token) {
     const dateFnsLocale = this._adapter.getProp('dateFnsLocale');
-
     return format(date, token, {
       locale: dateFnsLocale
     });
   }
-
-  isValidTimeZone(timeZone) {
-    const propTimeZone = this.getProp('timeZone');
-
-    const _timeZone = isNullOrUndefined(timeZone) ? propTimeZone : timeZone;
-
-    return ['string', 'number'].includes(typeof _timeZone) && _timeZone !== '';
-  }
   /**
    * 根据 type 处理 onChange 返回的参数
    *
@@ -424,20 +363,15 @@ export default class MonthsGridFoundation extends BaseFoundation {
    *
    * @param {Date|Date[]} value
    */
-
-
   disposeCallbackArgs(value) {
     let _value = Array.isArray(value) ? value : value && [value] || [];
-
-    if (this.isValidTimeZone()) {
-      const timeZone = this.getProp('timeZone');
+    const timeZone = this.getProp('timeZone');
+    if (isValidTimeZone(timeZone)) {
       _value = _value.map(date => zonedTimeToUtc(date, timeZone));
     }
-
     const type = this.getProp('type');
     const formatToken = this.getProp('format') || getDefaultFormatTokenByType(type);
     let notifyValue, notifyDate;
-
     switch (type) {
       case 'date':
       case 'dateTime':
@@ -449,25 +383,20 @@ export default class MonthsGridFoundation extends BaseFoundation {
           notifyValue = _value.map(v => v && this.localeFormat(v, formatToken));
           notifyDate = [..._value];
         }
-
         break;
-
       case 'dateRange':
       case 'dateTimeRange':
         notifyValue = _value.map(v => v && this.localeFormat(v, formatToken));
         notifyDate = [..._value];
         break;
-
       default:
         break;
     }
-
     return {
       notifyValue,
       notifyDate
     };
   }
-
   handleYearOrMonthChange(type) {
     let panelType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : strings.PANEL_TYPE_LEFT;
     let step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
@@ -482,21 +411,17 @@ export default class MonthsGridFoundation extends BaseFoundation {
     } = this.getStates();
     const isRangeType = this.isRangeType(datePanelType);
     const isLeftPanelInRange = isRangeType && panelType === strings.PANEL_TYPE_LEFT;
-
     const panelDetail = this._getPanelDetail(panelType);
-
     const {
       pickerDate
     } = panelDetail;
     const fn = dateCalcFns[type];
-    const targetMonth = fn(pickerDate, step); // Determine if the date has changed
-
+    const targetMonth = fn(pickerDate, step);
+    // Determine if the date has changed
     const panelDateHasUpdate = panelType === strings.PANEL_TYPE_LEFT && !_isEqual(targetMonth, monthLeft.pickerDate) || panelType === strings.PANEL_TYPE_RIGHT && !_isEqual(targetMonth, monthRight.pickerDate);
-
     this._updatePanelDetail(panelType, {
       pickerDate: targetMonth
     });
-
     if (panelDateHasUpdate) {
       // When the date changes
       if (!isRangeType) {
@@ -505,7 +430,6 @@ export default class MonthsGridFoundation extends BaseFoundation {
           notifyValue,
           notifyDate
         } = this.disposeCallbackArgs(targetMonth);
-
         this._adapter.notifyPanelChange(notifyDate, notifyValue);
       } else {
         // Double Panel Type
@@ -516,19 +440,16 @@ export default class MonthsGridFoundation extends BaseFoundation {
           // Right panel
           this.newBiMonthPanelDate[1] = targetMonth;
         }
-
         if (!(isLeftPanelInRange && notSeparateInRange)) {
           // Not synchronously switching the left panel in the scene
           const {
             notifyValue,
             notifyDate
           } = this.disposeCallbackArgs(this.newBiMonthPanelDate);
-
           this._adapter.notifyPanelChange(notifyDate, notifyValue);
         }
       }
     }
-
     if (autoSwitchDate) {
       this.updateDateAfterChangeYM(type, targetMonth);
     }
@@ -538,8 +459,6 @@ export default class MonthsGridFoundation extends BaseFoundation {
    * @param {*} type
    * @param {*} targetDate
    */
-
-
   updateDateAfterChangeYM(type, targetDate) {
     const {
       multiple,
@@ -551,13 +470,12 @@ export default class MonthsGridFoundation extends BaseFoundation {
       rangeStart,
       rangeEnd,
       monthLeft
-    } = this.getStates(); // FIXME:
-
+    } = this.getStates();
+    // FIXME:
     const includeRange = ['dateRange', 'dateTimeRange'].includes(type);
     const options = {
       closePanel: false
     };
-
     if (!multiple && !includeRange && selectedSet.size) {
       const selectedStr = Array.from(selectedSet)[0];
       const selectedDate = new Date(selectedStr);
@@ -567,7 +485,6 @@ export default class MonthsGridFoundation extends BaseFoundation {
         year,
         month
       });
-
       if (dateType === 'dateTime') {
         /**
          * 如果是 type dateTime 切换月份要读取只取的time
@@ -575,42 +492,34 @@ export default class MonthsGridFoundation extends BaseFoundation {
          */
         fullDate = this._mergeDateAndTime(fullDate, monthLeft.pickerDate);
       }
-
       if (disabledDate(fullDate, {
         rangeStart,
         rangeEnd
       })) {
         return;
       }
-
       this._adapter.notifySelectedChange([fullDate], options);
     }
   }
-
   _isMultiple() {
     return Boolean(this.getProp('multiple')) && this.getProp('type') === 'date';
   }
-
-  _isRange() {// return this._adapter.getProp('type') === dateRangeTypeKey;
+  _isRange() {
+    // return this._adapter.getProp('type') === dateRangeTypeKey;
   }
-
   handleDayClick(day, panelType) {
     const type = this.getProp('type');
-
     switch (true) {
       case type === 'date' || type === 'dateTime':
         this.handleDateSelected(day, panelType);
         break;
-
       case type === 'dateRange' || type === 'dateTimeRange':
         this.handleRangeSelected(day);
         break;
-
       default:
         break;
     }
   }
-
   handleDateSelected(day, panelType) {
     const {
       max,
@@ -618,22 +527,17 @@ export default class MonthsGridFoundation extends BaseFoundation {
       isControlledComponent,
       dateFnsLocale
     } = this.getProps();
-
     const multiple = this._isMultiple();
-
     const {
       selected
     } = this.getStates();
-
     const monthDetail = this._getPanelDetail(panelType);
-
     const newSelected = new Set(multiple ? [...selected] : []);
     const {
       fullDate
     } = day;
     const time = monthDetail.pickerDate;
     const dateStr = type === 'dateTime' ? this._mergeDateAndTime(fullDate, time) : fullDate;
-
     if (!multiple) {
       newSelected.add(dateStr);
     } else {
@@ -645,24 +549,19 @@ export default class MonthsGridFoundation extends BaseFoundation {
         newSelected.add(dateStr);
       }
     }
-
-    const dateFormat = this.getValidDateFormat(); // When passed to the upper layer, it is converted into a Date object to ensure that the input parameter format of initFormDefaultValue is consistent
-
+    const dateFormat = this.getValidDateFormat();
+    // When passed to the upper layer, it is converted into a Date object to ensure that the input parameter format of initFormDefaultValue is consistent
     const newSelectedDates = [...newSelected].map(_dateStr => compatibleParse(_dateStr, dateFormat, undefined, dateFnsLocale));
     this.handleShowDateAndTime(panelType, time);
-
     if (!isControlledComponent) {
       // Uncontrolled components, update internal values when operating, and notify external
       // MonthGrid internally uses string to represent fullDate for easy rendering
       this._adapter.updateDaySelected(newSelected);
     }
-
     this._adapter.notifySelectedChange(newSelectedDates);
   }
-
   handleShowDateAndTime(panelType, pickerDate, showDate) {
     const _showDate = showDate || pickerDate;
-
     this._updatePanelDetail(panelType, {
       showDate: _showDate,
       pickerDate
@@ -675,23 +574,18 @@ export default class MonthsGridFoundation extends BaseFoundation {
    * @param {Date|string} time
    * @returns {Date}
    */
-
-
   _mergeDateAndTime(date, time) {
     const dateFnsLocale = this._adapter.getProp('dateFnsLocale');
-
     const dateStr = format(isValidDate(date) ? date : compatibleParse(date, strings.FORMAT_FULL_DATE, undefined, dateFnsLocale), strings.FORMAT_FULL_DATE);
     const timeStr = format(isValidDate(time) ? time : compatibleParse(time, strings.FORMAT_TIME_PICKER, undefined, dateFnsLocale), strings.FORMAT_TIME_PICKER);
     const timeFormat = this.getValidTimeFormat();
-    return compatibleParse("".concat(dateStr, " ").concat(timeStr), timeFormat, undefined, dateFnsLocale);
+    return compatibleParse(`${dateStr} ${timeStr}`, timeFormat, undefined, dateFnsLocale);
   }
-
   handleRangeSelected(day) {
     let {
       rangeStart,
       rangeEnd
     } = this.getStates();
-
     const {
       startDateOffset,
       endDateOffset,
@@ -700,81 +594,70 @@ export default class MonthsGridFoundation extends BaseFoundation {
       rangeInputFocus,
       triggerRender
     } = this._adapter.getProps();
-
     const {
       fullDate
     } = day;
     let rangeStartReset = false;
     let rangeEndReset = false;
     const isDateRangeAndHasOffset = (startDateOffset || endDateOffset) && type === 'dateRange';
-
     if (isDateRangeAndHasOffset) {
       rangeStart = getFullDateOffset(startDateOffset, fullDate);
       rangeEnd = getFullDateOffset(endDateOffset, fullDate);
     } else {
       if (rangeInputFocus === 'rangeEnd') {
-        rangeEnd = fullDate; // rangStart Parten in dateTime: 'yyyy-MM-dd HH:MM:SS', rangeEnd parten: 'yyyy-MM-dd'
-
+        rangeEnd = fullDate;
+        // rangStart Parten in dateTime: 'yyyy-MM-dd HH:MM:SS', rangeEnd parten: 'yyyy-MM-dd'
         if (rangeStart && rangeEnd && isBefore(rangeEnd, rangeStart.trim().split(/\s+/)[0])) {
           rangeStart = null;
           rangeStartReset = true;
-        } // Compatible to select date after opening the panel without click input
-
+        }
+        // Compatible to select date after opening the panel without click input
       } else if (rangeInputFocus === 'rangeStart' || !rangeInputFocus) {
-        rangeStart = fullDate; // rangEnd Parten in dateTime: 'yyyy-MM-dd HH:MM:SS', rangeStart parten: 'yyyy-MM-dd'
-
+        rangeStart = fullDate;
+        // rangEnd Parten in dateTime: 'yyyy-MM-dd HH:MM:SS', rangeStart parten: 'yyyy-MM-dd'
         if (rangeStart && rangeEnd && isBefore(rangeEnd.trim().split(/\s+/)[0], rangeStart)) {
           rangeEnd = null;
           rangeEndReset = true;
         }
       }
-    } // next focus logic
-
-
+    }
+    // next focus logic
     const isRangeType = /range/i.test(type);
-
     if (isRangeType) {
       if (isDateRangeAndHasOffset) {
         this._adapter.setRangeStart(rangeStart);
-
         this._adapter.setRangeEnd(rangeEnd);
       } else {
         if (rangeInputFocus === 'rangeEnd') {
           this._adapter.setRangeEnd(rangeEnd);
-
           if (rangeStartReset) {
             this._adapter.setRangeStart(rangeStart);
           }
-
           if (!this._adapter.isAnotherPanelHasOpened('rangeEnd') || !rangeStart) {
             this._adapter.setRangeInputFocus('rangeStart');
           }
         } else if (rangeInputFocus === 'rangeStart' || !rangeInputFocus) {
           this._adapter.setRangeStart(rangeStart);
-
           if (rangeEndReset) {
             this._adapter.setRangeEnd(rangeEnd);
           }
-
           if (!this._adapter.isAnotherPanelHasOpened('rangeStart') || !rangeEnd) {
             this._adapter.setRangeInputFocus('rangeEnd');
           }
         }
       }
     }
-
-    const dateFormat = this.getValidDateFormat(); // only notify when choose completed
-
+    const dateFormat = this.getValidDateFormat();
+    // only notify when choose completed
     if (rangeStart || rangeEnd) {
       const [startDate, endDate] = [compatibleParse(rangeStart, dateFormat, undefined, dateFnsLocale), compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale)];
-      let date = [startDate, endDate]; // If the type is dateRangeTime, add the value of time
-
+      let date = [startDate, endDate];
+      // If the type is dateRangeTime, add the value of time
       if (type === 'dateTimeRange') {
         const startTime = this.getState('monthLeft').pickerDate;
         const endTime = this.getState('monthRight').pickerDate;
         const start = rangeStart ? this._mergeDateAndTime(rangeStart, startTime) : null;
         const end = rangeEnd ? this._mergeDateAndTime(rangeEnd, endTime) : null;
-
         if (isSameDay(startDate, endDate) && isBefore(end, start)) {
           date = [start, start];
         } else {
@@ -785,16 +668,12 @@ export default class MonthsGridFoundation extends BaseFoundation {
        * no need to check focus then
        *  - dateRange and isDateRangeAndHasOffset
        */
-
-
       const needCheckFocusRecord = !(type === 'dateRange' && isDateRangeAndHasOffset);
-
       this._adapter.notifySelectedChange(date, {
         needCheckFocusRecord
       });
     }
   }
-
   _isNeedSwap(rangeStart, rangeEnd) {
     // Check whether the start and end are reasonable and whether they need to be reversed
     return rangeStart && rangeEnd && isBefore(rangeEnd, rangeStart);
@@ -803,8 +682,6 @@ export default class MonthsGridFoundation extends BaseFoundation {
    * Day may be empty, this is unhover state
    * @param {*} day
    */
-
-
   handleDayHover() {
     let day = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       fullDate: ''
@@ -818,25 +695,19 @@ export default class MonthsGridFoundation extends BaseFoundation {
       endDateOffset,
       type
     } = this.getProps();
-
     this._adapter.setHoverDay(fullDate);
-
     if ((startDateOffset || endDateOffset) && type === 'dateRange') {
       const offsetRangeStart = getFullDateOffset(startDateOffset, fullDate);
       const offsetRangeEnd = getFullDateOffset(endDateOffset, fullDate);
-
       this._adapter.setOffsetRangeStart(offsetRangeStart);
-
       this._adapter.setOffsetRangeEnd(offsetRangeEnd);
     }
-  } // Guarantee that monthLeft, monthRight will not appear in the same month or monthLeft is greater than MonthRight
-
-
+  }
+  // Guarantee that monthLeft, monthRight will not appear in the same month or monthLeft is greater than MonthRight
   _autoAdjustMonth(monthLeft, monthRight) {
     let newMonthLeft = monthLeft;
     let newMonthRight = monthRight;
     const difference = differenceInCalendarMonths(monthLeft.pickerDate, monthRight.pickerDate);
-
     if (difference > 0) {
       // The month on the left is larger than the month on the right, swap
       newMonthLeft = Object.assign({}, monthRight);
@@ -848,36 +719,28 @@ export default class MonthsGridFoundation extends BaseFoundation {
         pickerDate: addMonths(monthRight.pickerDate, 1)
       });
     }
-
     return {
       monthLeft: newMonthLeft,
       monthRight: newMonthRight
     };
   }
-
   getValidTimeFormat() {
     const formatProp = this.getProp('format') || strings.FORMAT_TIME_PICKER;
     const timeFormatTokens = [];
-
     if (_includes(formatProp, 'h') || _includes(formatProp, 'H')) {
       timeFormatTokens.push('HH');
     }
-
     if (_includes(formatProp, 'm')) {
       timeFormatTokens.push('mm');
     }
-
     if (_includes(formatProp, 's')) {
       timeFormatTokens.push('ss');
     }
-
     return timeFormatTokens.join(':');
   }
-
   getValidDateFormat() {
     return this.getProp('format') || getDefaultFormatToken(this.getProp('type'));
   }
-
   handleTimeChange(newTime, panelType) {
     const {
       rangeEnd,
@@ -886,21 +749,19 @@ export default class MonthsGridFoundation extends BaseFoundation {
     const dateFnsLocale = this.getProp('dateFnsLocale');
     const ts = newTime.timeStampValue;
     const type = this.getProp('type');
-
     const panelDetail = this._getPanelDetail(panelType);
-
     const {
       showDate
     } = panelDetail;
     const timeDate = new Date(ts);
     const dateFormat = this.getValidDateFormat();
     const destRange = panelType === strings.PANEL_TYPE_RIGHT ? rangeEnd : rangeStart;
-    let year, monthNo, date; // if (pickerDate && isValidDate(pickerDate)) {
+    let year, monthNo, date;
+    // if (pickerDate && isValidDate(pickerDate)) {
     //     year = pickerDate.getFullYear();
     //     monthNo = pickerDate.getMonth();
     //     date = pickerDate.getDate();
     // } else
-
     if (type === 'dateTimeRange' && destRange) {
       const rangeDate = compatibleParse(destRange, dateFormat, undefined, dateFnsLocale);
       year = rangeDate.getFullYear();
@@ -911,17 +772,14 @@ export default class MonthsGridFoundation extends BaseFoundation {
       monthNo = showDate.getMonth();
       date = showDate.getDate();
     }
-
     const hours = timeDate.getHours();
     const minutes = timeDate.getMinutes();
     const seconds = timeDate.getSeconds();
     const milSeconds = timeDate.getMilliseconds();
     const dateArgs = [year, monthNo, date, hours, minutes, seconds, milSeconds];
     const fullValidDate = new Date(...dateArgs);
-
     if (type === 'dateTimeRange') {
       this.handleShowDateAndTime(panelType, fullValidDate, showDate);
-
       this._updateTimeInDateRange(panelType, fullValidDate);
     } else {
       const fullDate = formatFullDate(year, monthNo + 1, date);
@@ -930,7 +788,6 @@ export default class MonthsGridFoundation extends BaseFoundation {
         fullValidDate
       }, panelType);
       this.handleShowDateAndTime(panelType, fullValidDate);
-
       this._adapter.notifySelectedChange([fullValidDate]);
     }
   }
@@ -939,8 +796,6 @@ export default class MonthsGridFoundation extends BaseFoundation {
    * @param {string} panelType
    * @param {Date} timeDate
    */
-
-
   _updateTimeInDateRange(panelType, timeDate) {
     const {
       isControlledComponent,
@@ -948,74 +803,63 @@ export default class MonthsGridFoundation extends BaseFoundation {
     } = this.getProps();
     let rangeStart = this.getState('rangeStart');
     let rangeEnd = this.getState('rangeEnd');
-    const dateFormat = this.getValidDateFormat(); // TODO: Modify a time individually
-
+    const dateFormat = this.getValidDateFormat();
+    // TODO: Modify a time individually
     if (rangeStart && rangeEnd) {
       let startDate = compatibleParse(rangeStart, dateFormat, undefined, dateFnsLocale);
-      let endDate = compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale); // console.log('_updateTimeInDateRange()', rangeStart, rangeEnd, startDate, endDate);
-
+      let endDate = compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale);
+      // console.log('_updateTimeInDateRange()', rangeStart, rangeEnd, startDate, endDate);
       if (panelType === strings.PANEL_TYPE_RIGHT) {
         endDate = this._mergeDateAndTime(timeDate, timeDate);
         rangeEnd = format(endDate, strings.FORMAT_DATE_TIME);
-
         if (this._isNeedSwap(rangeStart, rangeEnd)) {
           [rangeStart, rangeEnd] = [rangeEnd, rangeStart];
           [startDate, endDate] = [endDate, startDate];
         }
-
         if (!isControlledComponent) {
           this._adapter.setRangeEnd(rangeEnd);
         }
       } else {
         startDate = this._mergeDateAndTime(timeDate, timeDate);
         rangeStart = format(startDate, strings.FORMAT_DATE_TIME);
-
         if (this._isNeedSwap(rangeStart, rangeEnd)) {
           [rangeStart, rangeEnd] = [rangeEnd, rangeStart];
           [startDate, endDate] = [endDate, startDate];
         }
-
         if (!isControlledComponent) {
           this._adapter.setRangeStart(rangeStart);
         }
-      } // console.log('_updateTimeInDateRange()', rangeStart, rangeEnd, startDate, endDate);
-
-
+      }
+      // console.log('_updateTimeInDateRange()', rangeStart, rangeEnd, startDate, endDate);
       this._adapter.notifySelectedChange([startDate, endDate]);
     }
   }
-
   _updatePanelDetail(panelType, kvs) {
     const {
       monthLeft,
       monthRight
     } = this.getStates();
-
     if (panelType === strings.PANEL_TYPE_RIGHT) {
       this._adapter.updateMonthOnRight(Object.assign(Object.assign({}, monthRight), kvs));
     } else {
       this._adapter.updateMonthOnLeft(Object.assign(Object.assign({}, monthLeft), kvs));
     }
   }
-
   showYearPicker(panelType) {
     this._updatePanelDetail(panelType, {
       isTimePickerOpen: false,
       isYearPickerOpen: true
     });
   }
-
   showTimePicker(panelType, opt) {
     if (this.getProp('disabledTimePicker')) {
       return;
     }
-
     this._updatePanelDetail(panelType, {
       isTimePickerOpen: true,
       isYearPickerOpen: false
     });
   }
-
   showDatePanel(panelType) {
     this._updatePanelDetail(panelType, {
       isTimePickerOpen: false,
@@ -1029,17 +873,13 @@ export default class MonthsGridFoundation extends BaseFoundation {
    *  - When yam open type is 'left' or 'right', weeks minHeight should be set
    *    If the minHeight is not set, the change of the number of weeks will cause the scrollList to be unstable
    */
-
-
   getYAMOpenType() {
     const {
       monthLeft,
       monthRight
     } = this._adapter.getStates();
-
     const leftYearPickerOpen = monthLeft.isYearPickerOpen;
     const rightYearPickerOpen = monthRight.isYearPickerOpen;
-
     if (leftYearPickerOpen && rightYearPickerOpen) {
       return 'both';
     } else if (leftYearPickerOpen) {
@@ -1050,5 +890,4 @@ export default class MonthsGridFoundation extends BaseFoundation {
       return 'none';
     }
   }
-
 }