@king-design/vue 3.5.2 → 3.6.0-beta.0

package/components/datepicker/basepicker.d.ts

@@ -3,7 +3,7 @@
  */
 import { TypeDefs } from 'intact-vue-next';
 import { State } from '../../hooks/useState';
-import { Dayjs, OpUnitType } from './dayjs';
+import { Dayjs, OpUnitType, QUnitType } from './dayjs';
 import type { useFormats } from './useFormats';
 import type { useDisabled } from './useDisabled';
 import { PanelFlags, usePanel } from './usePanel';
@@ -34,6 +34,7 @@ export interface BasePickerProps<V extends Value = Value, Multipe extends boolea
 }
 export interface BasePickerEvents extends BaseSelectEvents {
     selecting: [StateValueRange];
+    togglePosition: [];
 }
 export interface BasePickerBlocks<V extends Value = Value, R extends boolean = boolean> extends BaseSelectBlocks<R extends true ? [Value, Value] : Value> {
 }
@@ -47,7 +48,7 @@ export declare abstract class BasePicker<T extends BasePickerProps = BasePickerP
     abstract panel: ReturnType<typeof usePanel>;
     resetKeywords(keywords: State<string>): void;
 }
-export declare function useValue({ createDateByValueFormat, createDateByShowFormat, getShowString, getValueString, }: ReturnType<typeof useFormats>, { isDisabled, minDate }: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>, shouldUpdateValue: (v: StateValueItem) => boolean, updateValueOnInput: (v: DayjsValueItem) => void, getEqualType: () => OpUnitType, updateStateValue: (v: DayjsValue, value: State<StateValue>) => void): {
+export declare function useValue({ createDateByValueFormat, createDateByShowFormat, getShowString, getValueString, }: ReturnType<typeof useFormats>, { isDisabled, minDate }: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>, shouldUpdateValue: (v: StateValueItem) => boolean, updateValueOnInput: (v: DayjsValueItem) => void, getEqualType: () => OpUnitType | QUnitType, updateStateValue: (v: DayjsValue, value: State<StateValue>) => void): {
     value: State<StateValue>;
     format: () => string | string[];
     onConfirm: () => void;
@@ -56,4 +57,5 @@ export declare function useValue({ createDateByValueFormat, createDateByShowForm
     setValue: (v: StateValueItem, fromInput: boolean) => void;
     convertToDayjs: (v: BasePickerProps<Value>['value']) => DayjsValue;
     getDayjsValue: () => DayjsValue;
+    setMoment: () => void;
 };

package/components/datepicker/basepicker.js

@@ -30,7 +30,8 @@ var defaults = function defaults() {
   });
 };
 var events = _extends({}, BaseSelect.events, {
-  selecting: true
+  selecting: true,
+  togglePosition: true
 });
 export var BasePicker = /*#__PURE__*/function (_BaseSelect) {
   _inheritsLoose(BasePicker, _BaseSelect);
@@ -45,7 +46,7 @@ export var BasePicker = /*#__PURE__*/function (_BaseSelect) {
     var dayjsValue = this.value.getDayjsValue();
     var getShowString = this.formats.getShowString;
     var value = last(dayjsValue);
-    keywords.set(multiple ? '' : !range ? value ? getShowString(value) : '' : value ? [getShowString(value[0]), getShowString(value[1])].join(' ~ ') : '');
+    keywords.set(multiple ? '' : !range ? value ? getShowString(value) : '' : value ? [value[0] ? getShowString(value[0]) : '', value[1] ? getShowString(value[1]) : ''].join(' ~ ') : '');
   };
   return BasePicker;
 }(BaseSelect);
@@ -66,9 +67,15 @@ export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInp
   var dayjsValue = [];
   instance.watch('value', function (newValue, oldValue) {
     if (isEqualArray(newValue, oldValue)) return;
-    dayjsValue = convertToDayjs(newValue);
-    updateStateValue(dayjsValue, value);
-    // should update keywords
+    // 检查是否与当前 dayjsValue 对应的字符串相同，避免循环
+    var currentValueStr = convertToValueString(dayjsValue);
+    if (newValue === currentValueStr) {
+      return;
+    }
+    // 只执行一次转换和更新逻辑
+    var _value = convertToDayjs(newValue);
+    dayjsValue = _value;
+    updateStateValue(_value, value);
     instance.resetKeywords(instance.input.keywords);
   });
   watchState(instance.input.keywords, function (v) {
@@ -94,6 +101,8 @@ export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInp
         }
         if (endDate.isAfter(startDate)) {
           updateValueOnInput([startDate, endDate]);
+        } else {
+          updateValueOnInput([endDate, startDate]);
         }
       }
     } else {
@@ -143,16 +152,14 @@ export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInp
     return results;
   }
   function setSingleDate(v, fromInput) {
-    var _instance$get3 = instance.get(),
-      range = _instance$get3.range;
     value.set([v]);
     if (fromInput || shouldUpdateValue(v)) {
       updateValue();
     }
   }
   function addMultipeDate(v, fromInput) {
-    var _instance$get4 = instance.get(),
-      range = _instance$get4.range;
+    var _instance$get3 = instance.get(),
+      range = _instance$get3.range;
     var _value = value.value;
     _value = !_value ? [] : _sliceInstanceProperty(_value).call(_value);
     if (range && v.length === 2) {
@@ -194,19 +201,44 @@ export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInp
   function updateValue() {
     var _value = value.value;
     var valueStr = convertToValueString(_value);
+    // 检查是否需要更新，避免循环调用
+    if (instance.get('value') === valueStr) {
+      return;
+    }
+    // 在设置 value 之前先更新 dayjsValue
+    dayjsValue = _value;
     instance.set('value', valueStr);
     instance.resetKeywords(instance.input.keywords);
   }
   function onConfirm() {
-    // unique
-    if (!instance.get('multiple')) {
-      instance.hide();
+    var lastValue = last(instance.value.value.value);
+    var _instance$get4 = instance.get(),
+      multiple = _instance$get4.multiple,
+      range = _instance$get4.range;
+    if (!multiple) {
+      if (range) {
+        // 范围选择：需要开始和结束时间都选择完才关闭
+        if (lastValue.length === 2) {
+          instance.hide();
+        }
+        instance.trigger('togglePosition');
+      } else {
+        // 单选：选择完时间就关闭
+        if (lastValue) {
+          instance.hide();
+        }
+      }
     } else {
       unique();
       panel.reset();
     }
     updateValue();
   }
+  function setMoment() {
+    var now = dayjs();
+    setValue(now, true);
+    instance.hide();
+  }
   function unique() {
     var _value = value.value;
     var map = {};
@@ -264,6 +296,7 @@ export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInp
     getTimeValue: getTimeValue,
     setValue: setValue,
     convertToDayjs: convertToDayjs,
-    getDayjsValue: getDayjsValue
+    getDayjsValue: getDayjsValue,
+    setMoment: setMoment
   };
 }

package/components/datepicker/calendar.d.ts

@@ -5,7 +5,7 @@ import { StateValue } from './basepicker';
 import { PanelFlags } from './usePanel';
 export interface DatepickerCalendarProps {
     value: StateValue;
-    type?: 'date' | 'year' | 'month';
+    type?: 'date' | 'year' | 'month' | 'week' | 'quarter';
     flag: PanelFlags;
 }
 export interface DatepickerCalendarEvents {
@@ -14,13 +14,13 @@ export interface DatepickerCalendarEvents {
 export declare class DatepickerCalendar extends Component<DatepickerCalendarProps, DatepickerCalendarEvents> {
     static template: string | import('intact-vue-next').Template<any>;
     static defaults: () => Partial<DatepickerCalendarProps>;
-    type: import("../../hooks/useState").State<Required<"date" | "month" | "year" | undefined>>;
+    type: import("../../hooks/useState").State<Required<"date" | "month" | "week" | "year" | "quarter" | undefined>>;
     datepicker: Datepicker;
     showDate: {
         date: import("../../hooks/useState").State<Dayjs>;
         getDateLabel: () => {
             value: string;
-            onClick(e: import("../../hooks/useDocumentClick").IgnoreClickEvent): void;
+            onClick: (e: import("../../hooks/useDocumentClick").IgnoreClickEvent) => void;
         }[];
         prevMonth: () => void;
         nextMonth: () => void;
@@ -30,9 +30,9 @@ export declare class DatepickerCalendar extends Component<DatepickerCalendarProp
         prevTenYears: () => void;
     };
     status: {
-        isActive: (date: Dayjs, type: "date" | "month" | "year" | undefined) => boolean;
-        isInRange: (date: Dayjs, type: "date" | "month" | "year" | undefined) => boolean;
-        isDisabled: (value: Dayjs, type?: import("dayjs").OpUnitType) => boolean;
+        isActive: (date: Dayjs, type: "date" | "month" | "week" | "year" | "quarter" | undefined) => boolean;
+        isInRange: (date: Dayjs, type: "date" | "month" | "week" | "year" | "quarter" | undefined) => boolean;
+        isDisabled: (value: Dayjs, type?: "h" | "s" | "y" | "date" | "month" | "week" | "millisecond" | "second" | "minute" | "hour" | "day" | "year" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | "dates" | "d" | "D" | "M" | "m" | "ms" | "weeks" | "w" | "quarter" | "quarters" | "Q") => boolean;
     };
     days: {
         getDays: (now: Dayjs) => {
@@ -74,6 +74,34 @@ export declare class DatepickerCalendar extends Component<DatepickerCalendarProp
         }[];
         onClick: (date: Dayjs) => void;
     };
+    weeks: {
+        getWeeks: (now: Dayjs) => {
+            week: number;
+            days: {
+                isExceed: boolean;
+                label: number;
+                value: Dayjs;
+                isActive: boolean;
+                isToday: boolean;
+                isDisabled: boolean;
+                isHover: boolean;
+                isInRange: boolean;
+            }[];
+        }[];
+        onClick: (day: Dayjs) => void;
+    };
+    quarters: {
+        getQuarters: (now: Dayjs) => {
+            isActive: boolean;
+            isToday: boolean;
+            isDisabled: boolean;
+            isHover: boolean;
+            isInRange: boolean;
+            label: string;
+            value: Dayjs;
+        }[];
+        onClick: (date: Dayjs) => void;
+    };
     private config;
     triggerChange(value: Dayjs): void;
 }

package/components/datepicker/calendar.js

@@ -11,6 +11,8 @@ import { useShowDate } from './useShowDate';
 import { bind } from '../utils';
 import { useYears } from './useYears';
 import { useMonths } from './useMonths';
+import { useWeeks } from './useWeeks';
+import { useQuarters } from './useQuarters';
 import { useStatus } from './useStatus';
 import { useConfigContext } from '../config';
 var defaults = function defaults() {
@@ -34,6 +36,8 @@ export var DatepickerCalendar = /*#__PURE__*/function (_Component) {
     _this.days = useDays(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
     _this.years = useYears(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
     _this.months = useMonths(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
+    _this.weeks = useWeeks(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
+    _this.quarters = useQuarters(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
     _this.config = useConfigContext();
     return _this;
   }

package/components/datepicker/calendar.vdt.js

@@ -12,7 +12,12 @@ export default function ($props, $blocks, $__proto__) {
   var $this = this;
   var type = this.type.value;
   var isYear = type === 'year';
+  var isWeek = type === 'week';
+  var isQuarter = type === 'quarter';
   var isYearOrMonth = isYear || type === 'month';
+  var isDateOrDateTime = type === 'date' || type === 'datetime';
+  // isDateOrDateTime & isWeek合并
+  var showDateWeeks = isDateOrDateTime || isWeek;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-datepicker-calendar"] = true, _classNameObj[makeCalendarStyles(k)] = true, _classNameObj);
   var now = getNowDate();
@@ -58,7 +63,7 @@ export default function ($props, $blocks, $__proto__) {
       'className': _$cn(k + "-icon-left"),
       'size': 'small'
     })]
-  }), !isYearOrMonth ? _$cc(Button, {
+  }), showDateWeeks ? _$cc(Button, {
     'icon': true,
     'type': 'none',
     'size': 'small',
@@ -73,7 +78,7 @@ export default function ($props, $blocks, $__proto__) {
     return _$ce(2, 'span', $value.value, 0, _$cn(k + "-month-value"), {
       'ev-click': $value.onClick
     });
-  }, $this) : _$ce(2, 'span', this.years.getYearLabel(), 0, _$cn(k + "-month-value")), 0, _$cn(k + "-month-values")), _$ce(2, 'div', [!isYearOrMonth ? _$cc(Button, {
+  }, $this) : _$ce(2, 'span', this.years.getYearLabel(), 0, _$cn(k + "-month-value")), 0, _$cn(k + "-month-values")), _$ce(2, 'div', [showDateWeeks ? _$cc(Button, {
     'icon': true,
     'type': 'none',
     'size': 'small',
@@ -98,11 +103,22 @@ export default function ($props, $blocks, $__proto__) {
       'className': _$cn(k + "-icon-right"),
       'size': 'small'
     })]
-  })], 0, _$cn(k + "-right-btns"))], 4, _$cn(k + "-datepicker-month")), !isYearOrMonth ? [_$ce(2, 'div', _$ma([_$('日'), _$('一'), _$('二'), _$('三'), _$('四'), _$('五'), _$('六')], function ($value, $key) {
+  })], 0, _$cn(k + "-right-btns"))], 4, _$cn(k + "-datepicker-month")), showDateWeeks ? [_$ce(2, 'div', _$ma([_$('日'), _$('一'), _$('二'), _$('三'), _$('四'), _$('五'), _$('六')], function ($value, $key) {
     return _$ce(2, 'div', $value, 0, _$cn(k + "-weekday"));
-  }, $this), 4, _$cn(k + "-weekdays")), _$ce(2, 'div', getItems(getDays(now), onClickDay), 0, _$cn(k + "-days"), {
+  }, $this), 4, _$cn(k + "-weekdays")), isWeek ? _$ce(2, 'div', _$ma(this.weeks.getWeeks(now), function ($value, $key) {
+    return _$ce(2, 'div', [_$ce(2, 'div', $value.week, 0, _$cn(k + "-week-number"), {
+      'ev-click': function evClick(e) {
+        onClickDay($value.days[0].value);
+      },
+      'ev-mouseenter': function evMouseenter() {
+        return focusDate.set($value.days[0].value);
+      }
+    }), getItems($value.days, onClickDay)], 0, 'week-row');
+  }, $this), 4, _$cn(k + "-weeks"), {
     'ev-mouseleave': resetFocusDate
-  })] : _$ce(2, 'div', isYear ? getItems(this.years.getYears(now), this.years.onClick) : getItems(this.months.getMonths(now), this.months.onClick), 0, _$cn(k + "-years"), {
+  }) : _$ce(2, 'div', getItems(getDays(now), onClickDay), 0, _$cn(k + "-days"), {
+    'ev-mouseleave': resetFocusDate
+  })] : _$ce(2, 'div', isYear ? getItems(this.years.getYears(now), this.years.onClick) : isQuarter ? getItems(this.quarters.getQuarters(now), this.quarters.onClick) : getItems(this.months.getMonths(now), this.months.onClick), 0, _$cn(k + "-years"), {
     'ev-mouseleave': resetFocusDate
   })], 0, _$cn(classNameObj));
 }

package/components/datepicker/dayjs.d.ts

@@ -1,3 +1,14 @@
-import dayjs, { Dayjs, OpUnitType } from 'dayjs';
+import dayjs, { Dayjs, OpUnitType as DayjsOpUnitType, QUnitType as DayjsQUnitType } from 'dayjs';
+export type OpUnitType = DayjsOpUnitType;
+export type QUnitType = DayjsQUnitType;
+declare module 'dayjs' {
+    interface Dayjs {
+        isSame(date?: dayjs.ConfigType, unit?: DayjsOpUnitType | DayjsQUnitType): boolean;
+        isBefore(date?: dayjs.ConfigType, unit?: DayjsOpUnitType | DayjsQUnitType): boolean;
+        isAfter(date?: dayjs.ConfigType, unit?: DayjsOpUnitType | DayjsQUnitType): boolean;
+        add(value: number, unit?: DayjsOpUnitType | DayjsQUnitType): dayjs.Dayjs;
+        subtract(value: number, unit?: DayjsOpUnitType | DayjsQUnitType): dayjs.Dayjs;
+    }
+}
 export default dayjs;
-export type { Dayjs, OpUnitType };
+export type { Dayjs };

package/components/datepicker/dayjs.js

@@ -1,4 +1,10 @@
 import dayjs from 'dayjs';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
 dayjs.extend(customParseFormat);
+dayjs.extend(weekOfYear);
+dayjs.extend(quarterOfYear);
+dayjs.extend(advancedFormat);
 export default dayjs;

package/components/datepicker/helpers.d.ts

@@ -1,11 +1,11 @@
-import dayjs, { Dayjs, OpUnitType } from 'dayjs';
+import dayjs, { Dayjs, OpUnitType, QUnitType } from 'dayjs';
 import { StateValueItem } from './basepicker';
 export declare function getNowDate(isEnd?: boolean): dayjs.Dayjs;
 export declare function clearTime(date: Date): void;
 export declare function endTime(date: Date): void;
-export declare function isEqual(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
-export declare function isLT(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
-export declare function isGT(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType): boolean;
+export declare function isEqual(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType | QUnitType): boolean;
+export declare function isLT(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType | QUnitType): boolean;
+export declare function isGT(a: Dayjs | undefined | null, b: Dayjs | undefined | null, type?: OpUnitType | QUnitType): boolean;
 export declare function createDate(date: string): Date;
-export declare function findValueIndex(values: StateValueItem[], value: StateValueItem, type: OpUnitType): number;
+export declare function findValueIndex(values: StateValueItem[], value: StateValueItem, type: OpUnitType | QUnitType): number;
 export declare function last<T>(arr: T[]): T | undefined;

package/components/datepicker/index.d.ts

@@ -6,8 +6,9 @@ import { BasePicker, BasePickerProps, BasePickerEvents, BasePickerBlocks, Value
 export * as shortcuts from './shortcuts';
 export { dayjs };
 export interface DatepickerProps<V extends Value = Value, M extends boolean = boolean, R extends boolean = boolean> extends BasePickerProps<V extends string ? V : V | string, M, R> {
-    type?: 'date' | 'datetime' | 'year' | 'month';
+    type?: 'date' | 'datetime' | 'year' | 'month' | 'week' | 'quarter';
     shortcuts?: Shortcut[];
+    isMerge?: boolean;
 }
 export interface DatepickerEvents extends BasePickerEvents {
 }
@@ -26,7 +27,7 @@ export declare class Datepicker<V extends Value = Value, M extends boolean = fal
         getValueString: (value: dayjs.Dayjs) => string;
     };
     disabled: {
-        isDisabled: (value: dayjs.Dayjs, type?: dayjs.OpUnitType) => boolean;
+        isDisabled: (value: dayjs.Dayjs, type?: "h" | "s" | "y" | "date" | "month" | "week" | "millisecond" | "second" | "minute" | "hour" | "day" | "year" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | "dates" | "d" | "D" | "M" | "m" | "ms" | "weeks" | "w" | "quarter" | "quarters" | "Q") => boolean;
         isDisabledTime: (value: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => boolean;
         isDisabledConfirm: () => boolean;
         maxDate: State<dayjs.Dayjs | null>;
@@ -52,10 +53,24 @@ export declare class Datepicker<V extends Value = Value, M extends boolean = fal
         getTimeValue: (flag: import("./usePanel").PanelFlags) => dayjs.Dayjs | null | undefined;
         convertToDayjs: (v: Value | [Value, Value] | Value[] | [Value, Value][] | null | undefined) => import("./basepicker").DayjsValue;
         getDayjsValue: () => import("./basepicker").DayjsValue;
+        setMoment: () => void;
         value: State<import("./basepicker").StateValue>;
         setValue: (v: import("./basepicker").StateValueItem, fromInput: boolean) => void;
         onChangeDate: (v: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => void;
     };
+    activePosition: {
+        position: State<"end" | "start">;
+        charLength: State<number>;
+        startTextLength: State<number>;
+        handleInputClick: (e: MouseEvent) => void;
+        resetPosition: (pos?: "end" | "start") => void;
+        togglePosition: () => void;
+        setupEventListeners: () => void;
+        resetToStart: () => void;
+    };
+    mergeRange: {
+        formatMultipleValues: (dayjsValue: import("./basepicker").DayjsValue, results: string[]) => string[];
+    };
     init(): void;
     protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | import('intact-vue-next').Children[];
     protected getLabel(): string | string[];

package/components/datepicker/index.js

@@ -15,17 +15,21 @@ import { useFormats } from './useFormats';
 import { usePanel } from './usePanel';
 import { useFocusDate } from './useFocusDate';
 import { useKeyboards } from './useKeyboards';
+import { usePosition } from './usePosition';
+import { useMergeRange } from './useMergeRange';
 import { BasePicker } from './basepicker';
 import * as _shortcuts from './shortcuts';
 export { _shortcuts as shortcuts };
 export { dayjs };
 var typeDefs = _extends({}, BasePicker.typeDefs, {
-  type: ['date', 'datetime', 'year', 'month'],
-  shortcuts: Array
+  type: ['date', 'datetime', 'year', 'month', 'week', 'quarter'],
+  shortcuts: Array,
+  isMerge: Boolean
 });
 var defaults = function defaults() {
   return _extends({}, BasePicker.defaults(), {
-    type: 'date'
+    type: 'date',
+    isMerge: false
   });
 };
 export var Datepicker = /*#__PURE__*/function (_BasePicker) {
@@ -42,6 +46,8 @@ export var Datepicker = /*#__PURE__*/function (_BasePicker) {
     _this.panel = usePanel();
     _this.focusDate = useFocusDate();
     _this.value = useValue(_this.formats, _this.disabled, _this.panel);
+    _this.activePosition = usePosition();
+    _this.mergeRange = useMergeRange(_this.formats);
     return _this;
   }
   var _proto = Datepicker.prototype;
@@ -49,6 +55,7 @@ export var Datepicker = /*#__PURE__*/function (_BasePicker) {
     _BasePicker.prototype.init.call(this);
     provide(DATEPICKER, this);
     useKeyboards(this.panel.startRef, this.focusDate.focusDate);
+    this.activePosition.setupEventListeners();
   };
   _proto.getPlaceholder = function getPlaceholder() {
     var _this$get = this.get(),
@@ -63,11 +70,22 @@ export var Datepicker = /*#__PURE__*/function (_BasePicker) {
         return _$('请选择年份');
       case 'month':
         return _$('请选择月份');
+      case 'week':
+        return _$('请选择周');
+      case 'quarter':
+        return _$('请选择季度');
       default:
         return range ? _$('开始日期 ~ 结束日期') : _$('请选择日期');
     }
   };
   _proto.getLabel = function getLabel() {
+    var _this$get2 = this.get(),
+      multiple = _this$get2.multiple;
+    if (multiple) {
+      var results = this.value.format();
+      var dayjsValue = this.value.getDayjsValue();
+      return this.mergeRange.formatMultipleValues(dayjsValue, results);
+    }
     return this.value.format();
   };
   _proto.clear = function clear(e) {
@@ -81,8 +99,8 @@ export var Datepicker = /*#__PURE__*/function (_BasePicker) {
     var _this$value = this.value,
       setValue = _this$value.setValue,
       convertToDayjs = _this$value.convertToDayjs;
-    var _this$get2 = this.get(),
-      multiple = _this$get2.multiple;
+    var _this$get3 = this.get(),
+      multiple = _this$get3.multiple;
     setValue(convertToDayjs(shortcut.value())[0], true);
     if (!multiple) {
       this.hide();