rsuite 5.48.0 → 5.49.0

package/esm/DatePicker/PickerIndicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface PickerIndicatorProps {
+    loading?: boolean;
+    caretAs?: React.ElementType | null;
+    onClose?: () => void;
+    showCleanButton?: boolean;
+    as?: React.ElementType;
+}
+declare const PickerIndicator: ({ loading, caretAs, onClose, showCleanButton, as: Component }: PickerIndicatorProps) => JSX.Element;
+export default PickerIndicator;

package/esm/DatePicker/PickerIndicator.js

@@ -0,0 +1,42 @@
+'use client';
+import React from 'react';
+import { Icon } from '@rsuite/icons';
+import { useCustom, useClassNames } from '../utils';
+import InputGroup from '../InputGroup';
+import CloseButton from '../CloseButton';
+import Loader from '../Loader';
+var PickerIndicator = function PickerIndicator(_ref) {
+  var loading = _ref.loading,
+    caretAs = _ref.caretAs,
+    onClose = _ref.onClose,
+    showCleanButton = _ref.showCleanButton,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? InputGroup.Addon : _ref$as;
+  var _useCustom = useCustom(),
+    locale = _useCustom.locale;
+  var _useClassNames = useClassNames('picker'),
+    prefix = _useClassNames.prefix;
+  var addon = function addon() {
+    if (loading) {
+      return /*#__PURE__*/React.createElement(Loader, {
+        className: prefix('loader'),
+        "data-testid": "spinner"
+      });
+    }
+    if (showCleanButton) {
+      return /*#__PURE__*/React.createElement(CloseButton, {
+        className: prefix('clean'),
+        tabIndex: -1,
+        locale: {
+          closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear
+        },
+        onClick: onClose
+      });
+    }
+    return caretAs && /*#__PURE__*/React.createElement(Icon, {
+      as: caretAs
+    });
+  };
+  return /*#__PURE__*/React.createElement(Component, null, addon());
+};
+export default PickerIndicator;

package/esm/DatePicker/PickerLabel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface PickerLabelProps {
+    id: string;
+    className?: string;
+    children?: React.ReactNode;
+    as?: React.ElementType;
+}
+declare const PickerLabel: ({ children, className, as: Component, ...rest }: PickerLabelProps) => JSX.Element | null;
+export default PickerLabel;

package/esm/DatePicker/PickerLabel.js

@@ -0,0 +1,17 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import InputGroup from '../InputGroup';
+var PickerLabel = function PickerLabel(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? InputGroup.Addon : _ref$as,
+    rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "as"]);
+  return children ? /*#__PURE__*/React.createElement(Component, _extends({
+    "data-testid": "picker-label",
+    className: className
+  }, rest), children) : null;
+};
+export default PickerLabel;

package/esm/DatePicker/Toolbar.js

@@ -2,20 +2,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
-import PropTypes from 'prop-types';
 import Button from '../Button';
 import { useClassNames } from '../utils';
 import PredefinedRanges from './PredefinedRanges';
 import Stack from '../Stack';
 var SubmitButton = function SubmitButton(_ref) {
-  var hide = _ref.hide,
-    disabledOkBtn = _ref.disabledOkBtn,
+  var disabledOkBtn = _ref.disabledOkBtn,
     calendarDate = _ref.calendarDate,
     onOk = _ref.onOk,
     children = _ref.children;
-  if (hide) {
-    return null;
-  }
   var disabled = disabledOkBtn === null || disabledOkBtn === void 0 ? void 0 : disabledOkBtn(calendarDate);
   return /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
@@ -28,7 +23,7 @@ var SubmitButton = function SubmitButton(_ref) {
 /**
  * Toolbar for DatePicker and DateRangePicker
  */
-var Toolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(props, ref) {
   var className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'picker-toolbar' : _props$classPrefix,
@@ -64,23 +59,10 @@ var Toolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onShortcutClick: onShortcutClick
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix('right')
-  }, /*#__PURE__*/React.createElement(SubmitButton, {
+  }, !hideOkBtn && /*#__PURE__*/React.createElement(SubmitButton, {
     disabledOkBtn: disabledOkBtn,
-    hide: hideOkBtn,
     calendarDate: calendarDate,
     onOk: onOk
   }, locale === null || locale === void 0 ? void 0 : locale.ok)));
 });
-Toolbar.displayName = 'Toolbar';
-Toolbar.propTypes = {
-  ranges: PropTypes.array,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  calendarDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.arrayOf(PropTypes.instanceOf(Date))]).isRequired,
-  onShortcutClick: PropTypes.func,
-  onOk: PropTypes.func,
-  disabledShortcut: PropTypes.func,
-  disabledOkBtn: PropTypes.func,
-  hideOkBtn: PropTypes.bool
-};
 export default Toolbar;

package/esm/DatePicker/utils.d.ts

@@ -1,5 +1,5 @@
 import { ToolbarProps } from './Toolbar';
-import { InnerRange } from './types';
+import { InnerRange, RangeType } from './types';
 import { DateRange } from '../DateRangePicker/types';
 export declare function getDefaultRanges<T extends Date | DateRange>(value: T): InnerRange<T>[];
 /**
@@ -8,3 +8,7 @@ export declare function getDefaultRanges<T extends Date | DateRange>(value: T):
  * @param calendarDate
  */
 export declare const getRanges: <T extends Date | DateRange>({ ranges, calendarDate }: Pick<ToolbarProps<T, T>, "calendarDate" | "ranges">) => InnerRange<T>[];
+export declare function splitRanges(ranges?: RangeType<Date>[]): {
+    sideRanges: RangeType<Date>[];
+    bottomRanges: RangeType<Date>[];
+};

package/esm/DatePicker/utils.js

@@ -51,4 +51,19 @@ export var getRanges = function getRanges(_ref3) {
   return typeof ranges === 'undefined' ? getDefaultRanges(calendarDate) : ranges.map(generateRangesIterator({
     calendarDate: calendarDate
   }));
-};
+};
+export function splitRanges(ranges) {
+  // The shortcut option on the left side of the calendar panel
+  var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+  })) || [];
+
+  // The shortcut option on the bottom of the calendar panel
+  var bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
+  })) || [];
+  return {
+    sideRanges: sideRanges,
+    bottomRanges: bottomRanges
+  };
+}

package/esm/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { InputProps } from '../Input';
+import { FormControlBaseProps } from '../@types/common';
+declare type ValueType = [Date | null, Date | null] | null;
+export interface DateRangeInputProps extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>, FormControlBaseProps<ValueType> {
+    /**
+     * The character between the start and end dates.
+     * @default ' ~ '
+     **/
+    character?: string;
+    /**
+     * Format of the date when rendered in the input. Format of the string is based on Unicode Technical Standard.
+     *
+     * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+     * @default 'yyyy-MM-dd'
+     **/
+    format?: string;
+    /**
+     * The `placeholder` prop defines the text displayed in a form control when the control has no value.
+     */
+    placeholder?: string;
+}
+/**
+ * The DateRangeInput component lets users select a date with the keyboard.
+ * @version 5.59.0
+ * @see https://rsuitejs.com/components/date-range-input/
+ */
+declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<unknown>>;
+export default DateRangeInput;

package/esm/DateRangeInput/DateRangeInput.js

@@ -0,0 +1,237 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useState, useRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import Input from '../Input';
+import { mergeRefs, useClassNames, useCustom, useControlled, useEventCallback } from '../utils';
+import { validateDateTime, isFieldFullValue, useDateInputState, useInputSelection, useKeyboardInputEvent, useIsFocused } from '../DateInput';
+import { getInputSelectedState, DateType, getDateType, isSwitchDateType } from './utils';
+/**
+ * The DateRangeInput component lets users select a date with the keyboard.
+ * @version 5.59.0
+ * @see https://rsuitejs.com/components/date-range-input/
+ */
+var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'date-range-input' : _props$classPrefix,
+    _props$character = props.character,
+    character = _props$character === void 0 ? ' ~ ' : _props$character,
+    _props$format = props.format,
+    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    valueProp = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+    placeholder = props.placeholder,
+    onChange = props.onChange,
+    onKeyDown = props.onKeyDown,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "character", "format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"]);
+  var _useClassNames = useClassNames(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix());
+  var inputRef = useRef();
+  var _useState = useState({
+      selectedPattern: 'y',
+      selectionStart: 0,
+      selectionEnd: 0
+    }),
+    selectedState = _useState[0],
+    setSelectedState = _useState[1];
+  var _useCustom = useCustom('Calendar'),
+    locale = _useCustom.locale;
+  var rangeFormatStr = "" + formatStr + character + formatStr;
+  var dateLocale = locale.dateLocale;
+  var _useControlled = useControlled(valueProp, defaultValue),
+    value = _useControlled[0],
+    setValue = _useControlled[1],
+    isControlled = _useControlled[2];
+  var _useState2 = useState(DateType.Start),
+    dateType = _useState2[0],
+    setDateType = _useState2[1];
+  var dateInputOptions = {
+    formatStr: formatStr,
+    locale: dateLocale,
+    isControlledDate: isControlled
+  };
+  var startDateState = useDateInputState(_extends({}, dateInputOptions, {
+    date: value === null || value === void 0 ? void 0 : value[0]
+  }));
+  var endDateState = useDateInputState(_extends({}, dateInputOptions, {
+    date: value === null || value === void 0 ? void 0 : value[1]
+  }));
+  var getActiveState = function getActiveState(type) {
+    if (type === void 0) {
+      type = dateType;
+    }
+    return type === DateType.Start ? startDateState : endDateState;
+  };
+  var _useIsFocused = useIsFocused({
+      onBlur: onBlur,
+      onFocus: onFocus
+    }),
+    focused = _useIsFocused[0],
+    focusEventProps = _useIsFocused[1];
+  var renderedValue = useMemo(function () {
+    var dateString = startDateState.toDateString() + character + endDateState.toDateString();
+    if (!startDateState.isEmptyValue() || !endDateState.isEmptyValue()) {
+      return dateString;
+    }
+    return !focused ? '' : dateString;
+  }, [character, endDateState, focused, startDateState]);
+  var keyPressOptions = {
+    formatStr: formatStr,
+    rangeFormatStr: rangeFormatStr,
+    localize: dateLocale.localize,
+    selectedMonth: getActiveState().dateField.month,
+    dateString: renderedValue,
+    dateType: dateType,
+    character: character
+  };
+  var setSelectionRange = useInputSelection(inputRef);
+  var handleChange = useEventCallback(function (date, event) {
+    var nextValue = dateType === DateType.Start ? [date, value === null || value === void 0 ? void 0 : value[1]] : [value === null || value === void 0 ? void 0 : value[0], date];
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    setValue(nextValue);
+  });
+  var onSegmentChange = useEventCallback(function (event, nextDirection) {
+    var input = event.target;
+    var key = event.key;
+    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
+    if (input.selectionEnd === null || input.selectionStart === null) {
+      return;
+    }
+    var cursorIndex = direction === 'right' ? input.selectionEnd : input.selectionStart;
+    var nextDateType = dateType;
+    if (isSwitchDateType(renderedValue, character, cursorIndex, direction)) {
+      nextDateType = dateType === DateType.Start ? DateType.End : DateType.Start;
+      setDateType(nextDateType);
+    }
+    var state = getInputSelectedState(_extends({}, keyPressOptions, {
+      dateType: nextDateType,
+      selectedMonth: getActiveState(nextDateType).dateField.month,
+      input: input,
+      direction: direction
+    }));
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    setSelectedState(state);
+  });
+  var onSegmentValueChange = useEventCallback(function (event) {
+    var input = event.target;
+    var key = event.key;
+    var offset = key === 'ArrowUp' ? 1 : -1;
+    var state = getInputSelectedState(_extends({}, keyPressOptions, {
+      input: input,
+      valueOffset: offset
+    }));
+    setSelectedState(state);
+    getActiveState().setDateOffset(state.selectedPattern, offset, function (date) {
+      return handleChange(date, event);
+    });
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+  });
+  var onSegmentValueChangeWithNumericKeys = useEventCallback(function (event) {
+    var input = event.target;
+    var key = event.key;
+    var pattern = selectedState.selectedPattern;
+    if (!pattern) {
+      return;
+    }
+    var field = getActiveState().getDateField(pattern);
+    var value = parseInt(key, 10);
+    var padValue = parseInt("" + (field.value || '') + key, 10);
+    var newValue = value;
+
+    // Check if the value entered by the user is a valid date
+    if (validateDateTime(field.name, padValue)) {
+      newValue = padValue;
+    }
+    if (pattern === 'M') {
+      // Month cannot be less than 1.
+      newValue = Math.max(1, newValue);
+    }
+    getActiveState().setDateField(pattern, newValue, function (date) {
+      return handleChange(date, event);
+    });
+
+    // The currently selected month will be retained as a parameter of getInputSelectedState,
+    // but if the user enters a month, the month value will be replaced with the value entered by the user.
+    var selectedMonth = pattern === 'M' ? newValue : getActiveState().dateField.month;
+    var nextState = getInputSelectedState(_extends({}, keyPressOptions, {
+      input: input,
+      selectedMonth: selectedMonth
+    }));
+    setSelectedState(nextState);
+    setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+
+    // If the field is full value, move the cursor to the next field
+    if (isFieldFullValue(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+      onSegmentChange(event, 'right');
+    }
+  });
+  var onSegmentValueRemove = useEventCallback(function (event) {
+    var input = event.target;
+    if (selectedState.selectedPattern) {
+      var nextState = getInputSelectedState(_extends({}, keyPressOptions, {
+        input: input,
+        valueOffset: null
+      }));
+      setSelectedState(nextState);
+      setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+      getActiveState().setDateField(selectedState.selectedPattern, null, function (date) {
+        return handleChange(date, event);
+      });
+    }
+  });
+  var handleClick = useEventCallback(function (event) {
+    var input = event.target;
+    if (input.selectionStart === null) {
+      return;
+    }
+    var cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;
+    var dateType = getDateType(renderedValue, character, cursorIndex);
+    var state = getInputSelectedState(_extends({}, keyPressOptions, {
+      dateType: dateType,
+      selectedMonth: getActiveState(dateType).dateField.month,
+      input: input
+    }));
+    setDateType(dateType);
+    setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+  });
+  var onKeyboardInput = useKeyboardInputEvent({
+    onSegmentChange: onSegmentChange,
+    onSegmentValueChange: onSegmentValueChange,
+    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,
+    onSegmentValueRemove: onSegmentValueRemove,
+    onKeyDown: onKeyDown
+  });
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    inputMode: focused ? 'numeric' : 'text',
+    autoComplete: "off",
+    autoCorrect: "off",
+    spellCheck: false,
+    className: classes,
+    ref: mergeRefs(inputRef, ref),
+    onKeyDown: onKeyboardInput,
+    onClick: handleClick,
+    value: renderedValue,
+    placeholder: placeholder || rangeFormatStr
+  }, focusEventProps, rest));
+});
+DateRangeInput.displayName = 'DateRangeInput';
+DateRangeInput.propTypes = {
+  character: PropTypes.string,
+  className: PropTypes.string,
+  classPrefix: PropTypes.string,
+  format: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func
+};
+export default DateRangeInput;

package/esm/DateRangeInput/index.d.ts

@@ -0,0 +1,3 @@
+import DateRangeInput from './DateRangeInput';
+export type { DateRangeInputProps } from './DateRangeInput';
+export default DateRangeInput;

package/esm/DateRangeInput/index.js

@@ -0,0 +1,3 @@
+'use client';
+import DateRangeInput from './DateRangeInput';
+export default DateRangeInput;

package/esm/DateRangeInput/utils.d.ts

@@ -0,0 +1,61 @@
+import { type Locale } from 'date-fns';
+export declare enum DateType {
+    Start = "Start",
+    End = "End"
+}
+interface SelectedStateOptions {
+    /**
+     * The input element
+     */
+    input: HTMLInputElement;
+    /**
+     * The direction of the arrow key, left or right
+     */
+    direction?: 'left' | 'right';
+    /**
+     * Format of the string is based on Unicode Technical Standard.
+     * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+     */
+    formatStr: string;
+    /**
+     * The format string of the range, which is used to calculate the selection range.
+     */
+    rangeFormatStr: string;
+    /**
+     * The locale object, date-fns locale object
+     */
+    localize: Locale['localize'];
+    /**
+     * The selected month, used to calculate the offset of the character selection range
+     */
+    selectedMonth: number | null;
+    /**
+     * The offset of the value, which is used to calculate the month.
+     * This value will be changed when pressing the up and down arrow keys.
+     */
+    valueOffset?: number | null;
+    /**
+     * The date is rendered in string format according to format
+     */
+    dateString: string;
+    /**
+     * The character that separates two dates
+     *
+     * Only for `DateRangeInput`
+     **/
+    character: string;
+    /**
+     * The date type, start or end
+     *
+     * Only for `DateRangeInput`
+     */
+    dateType: DateType;
+}
+export declare function getInputSelectedState(options: SelectedStateOptions): {
+    selectionStart: number;
+    selectionEnd: number;
+    selectedPattern: string;
+};
+export declare function getDateType(dateString: string, character: string, cursorIndex: number): DateType;
+export declare function isSwitchDateType(dateString: string, character: string, cursorIndex: number, direction: 'right' | 'left'): boolean;
+export {};

package/esm/DateRangeInput/utils.js

@@ -0,0 +1,137 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { getSelectIndexGap, isCursorAfterMonth, getDatePattern } from '../DateInput';
+export var DateType;
+(function (DateType) {
+  DateType["Start"] = "Start";
+  DateType["End"] = "End";
+})(DateType || (DateType = {}));
+export function getInputSelectedState(options) {
+  var input = options.input,
+    direction = options.direction,
+    formatStr = options.formatStr,
+    rangeFormatStr = options.rangeFormatStr,
+    localize = options.localize,
+    selectedMonth = options.selectedMonth,
+    _options$valueOffset = options.valueOffset,
+    valueOffset = _options$valueOffset === void 0 ? 0 : _options$valueOffset,
+    character = options.character,
+    dateType = options.dateType,
+    dateString = options.dateString;
+  var getPatternSelectedIndexes = function getPatternSelectedIndexes(pattern) {
+    var selectionStart = 0;
+    var selectionEnd = 0;
+    if (dateType === DateType.Start) {
+      selectionStart = rangeFormatStr.indexOf(pattern);
+      selectionEnd = rangeFormatStr.split(character)[0].lastIndexOf(pattern) + 1;
+    } else if (dateType === DateType.End) {
+      var position = rangeFormatStr.indexOf(character) + character.length;
+      selectionStart = rangeFormatStr.indexOf(pattern, position);
+      selectionEnd = rangeFormatStr.lastIndexOf(pattern) + 1;
+    }
+    var endDateGap = dateString.indexOf(character) - rangeFormatStr.indexOf(character);
+
+    // If the date type is end, and the end date is not selected, the selection range needs to be adjusted.
+    if (dateType === DateType.End && endDateGap > 0) {
+      selectionStart += endDateGap;
+      selectionEnd += endDateGap;
+    }
+    var gap = getSelectIndexGap({
+      pattern: pattern,
+      formatStr: formatStr,
+      valueOffset: valueOffset,
+      selectedMonth: selectedMonth,
+      localize: localize
+    });
+    var isSelectedMonth = pattern === 'M';
+    var isNullMonth = selectedMonth === null && !(isSelectedMonth && valueOffset !== 0);
+
+    // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.
+    if (isNullMonth) {
+      return {
+        selectionStart: selectionStart,
+        selectionEnd: selectionEnd
+      };
+    }
+    if (isSelectedMonth) {
+      return {
+        selectionStart: selectionStart,
+        selectionEnd: selectionEnd + gap
+      };
+    }
+    if (isCursorAfterMonth(selectionStart, formatStr)) {
+      return {
+        selectionStart: selectionStart + gap,
+        selectionEnd: selectionEnd + gap
+      };
+    }
+    return {
+      selectionStart: selectionStart,
+      selectionEnd: selectionEnd
+    };
+  };
+  if (typeof input.selectionEnd === 'number' && typeof input.selectionStart === 'number') {
+    var index = input.selectionStart;
+    var positionOffset = -1;
+    if (direction === 'left') {
+      index = input.selectionStart - 1;
+    } else if (direction === 'right') {
+      index = input.selectionEnd + 1;
+      positionOffset = 1;
+    }
+
+    // The start position of the index of the end date
+    var endDateIndex = dateString.indexOf(character) + character.length;
+    var datePattern = getDatePattern({
+      selectionIndex: dateType === DateType.End ? index - endDateIndex : index,
+      positionOffset: positionOffset,
+      formatStr: formatStr,
+      dateString: dateString,
+      valueOffset: valueOffset,
+      selectedMonth: selectedMonth,
+      localize: localize
+    });
+    var indexes = getPatternSelectedIndexes(datePattern);
+    return _extends({
+      selectedPattern: datePattern
+    }, indexes);
+  }
+  return {
+    selectedPattern: 'y',
+    selectionStart: 0,
+    selectionEnd: 0
+  };
+}
+export function getDateType(dateString, character, cursorIndex) {
+  var splitIndex = dateString.indexOf(character);
+  if (cursorIndex > splitIndex) {
+    return DateType.End;
+  }
+  return DateType.Start;
+}
+export function isSwitchDateType(dateString, character, cursorIndex, direction) {
+  var characterIndex = dateString.indexOf(character);
+  var startIndex = cursorIndex;
+  var endIndex = startIndex + character.length;
+  if (direction === 'left') {
+    endIndex = cursorIndex;
+    startIndex = endIndex - character.length;
+  }
+
+  // Check whether the cursor is a separator before and after
+  if (dateString.substring(startIndex, endIndex) === character) {
+    return true;
+  }
+
+  // Check whether the cursor is a number or letter before and after. If not, switch the date type.
+  // eg: `2020年12月01日`, the cursor is behind 01, press the right key, and switch to the end date.
+  if (direction === 'right') {
+    if (!dateString.substring(cursorIndex, characterIndex).match(/[0-9a-zA-Z]/)) {
+      return true;
+    }
+  }
+  if (!dateString.substring(characterIndex, cursorIndex).match(/[0-9a-zA-Z]/)) {
+    return true;
+  }
+  return false;
+}