@blueking/date-picker 2.0.0-beta.23 → 2.0.0-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/date-picker",
-  "version": "2.0.0-beta.23",
+  "version": "2.0.0-beta.25",
   "description": "蓝鲸监控平台日期时间选择",
   "license": "MIT",
   "author": "Tencent BlueKing",

package/typings/date-picker.vue.d.ts

@@ -30,9 +30,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     "onUpdate:timezone"?: ((value: string, timezoneInfo: ITimezoneItem) => any) | undefined;
 }, {
     format: string;
+    commonUseList: {
+        id: DateValue;
+        name: string;
+    }[] | DateValue[];
     version: number | string;
     behavior: "normal" | "simplicity";
-    commonUseList: DateValue[];
     needTimezone: boolean;
 }, {}>;
 export default _default;

package/typings/utils/date.d.ts

@@ -22,6 +22,7 @@ export declare class DateRange {
     startDate: Dayjs | null;
     startNum: number | undefined;
     startUnit: DateUnit | undefined;
+    userDisplayName: string | undefined;
     constructor(dateValue?: DateValue, format?: string, timezome?: string);
     get dateMode(): DateMode;
     get endDisplayText(): string;
@@ -31,6 +32,7 @@ export declare class DateRange {
     get startDisplayText(): string;
     dateDuration(): number | undefined;
     isInValidDateRange(date: DateRange): boolean;
+    setUserDisplayName(v: string): void;
     toDisplayString(): string;
     toEmitValue(): [
         DateValue,

package/typings/utils/types.d.ts

@@ -20,7 +20,10 @@ export type CommonDateValue = [string, string];
 export type DateValue = [Dayjs | number | string, Dayjs | number | string];
 export interface IDatePickerProps {
     behavior?: 'normal' | 'simplicity';
-    commonUseList?: DateValue[];
+    commonUseList?: {
+        id: DateValue;
+        name: string;
+    }[] | DateValue[];
     disabled?: boolean;
     format?: string;
     modelValue: DateValue | undefined;

package/typings/utils/utils.d.ts

@@ -1,15 +1,15 @@
 import { type ComputedRef, type InjectionKey } from 'vue';
 import { type LangKey } from '../lang/lang';
 import { type ITimezoneItem } from './timezone';
-import { type DateValue } from './types';
+import { type IDatePickerProps, type DateValue } from './types';
 export interface IDatePickerProvider {
-    commonUseList: ComputedRef<DateValue[]>;
+    commonUseList: ComputedRef<IDatePickerProps['commonUseList']>;
     format: ComputedRef<string>;
     storeKey: ComputedRef<string>;
     t: (key: LangKey) => string;
     timezoneInfo: ComputedRef<ITimezoneItem>;
     version: ComputedRef<number | string>;
-    vildateTimeRange: ComputedRef<DateValue | undefined>;
+    validateTimeRange: ComputedRef<DateValue | undefined>;
 }
 export declare const DATE_PICKER_PROVIDER_KEY: InjectionKey<IDatePickerProvider>;
 export declare const useDatePickerProvider: (data: IDatePickerProvider) => void;

package/vue2/index.es.min.js

@@ -23253,6 +23253,7 @@ class DateRange {
     __publicField(this, "startDate");
     __publicField(this, "startNum");
     __publicField(this, "startUnit");
+    __publicField(this, "userDisplayName");
     this.dateValue = dateValue;
     this.format = format;
     this.timezome = timezome;
@@ -23351,6 +23352,9 @@ class DateRange {
     if (!this.startDate || !this.endDate) return false;
     return (this.startDate.isSame(date.startDate, "ms") || this.startDate.isBefore(date.startDate)) && (this.endDate.isSame(date.endDate, "ms") || this.endDate.isAfter(date.endDate));
   }
+  setUserDisplayName(v2) {
+    this.userDisplayName = v2;
+  }
   toDisplayString() {
     var _a, _b;
     const {
@@ -23365,6 +23369,7 @@ class DateRange {
       startNum,
       startUnit
     } = this;
+    if (this.userDisplayName) return this.userDisplayName;
     if (!startDate || !endDate || !isValidate) {
       return ((_a = this.dateValue) == null ? void 0 : _a.join(" ~ ")) || "";
     }
@@ -24964,16 +24969,16 @@ const useDatePickerProvider = (data2) => {
 };
 const useDatePickerInject = () => inject(DATE_PICKER_PROVIDER_KEY);
 const useValidate = () => {
-  const { format, timezoneInfo, vildateTimeRange } = useDatePickerInject();
+  const { format, timezoneInfo, validateTimeRange } = useDatePickerInject();
   const validDateRange = customRef((track) => {
-    let date = new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+    let date = new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
     return {
       get() {
         var _a;
         track();
-        if (((_a = vildateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
-        if (vildateTimeRange.value.some((v2) => typeof v2 === "string" && v2.includes("now")))
-          return new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+        if (((_a = validateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
+        if (validateTimeRange.value.some((v2) => typeof v2 === "string" && v2.includes("now")))
+          return new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
         return date;
       },
       set() {
@@ -26716,9 +26721,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const browserTimezone = dayjs.tz.guess();
     const recentUseList = shallowRef(getStoreDateList(storeKey2.value));
     const dateList = computed(
-      () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map(
-        (date) => new DateRange(date, format.value, props2.timezone)
-      )
+      () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map((date) => {
+        if ((date == null ? void 0 : date.id) && date.name) {
+          const dateRange = new DateRange(date.id, format.value, props2.timezone);
+          dateRange.setUserDisplayName(date.name);
+          return dateRange;
+        }
+        return new DateRange(date, format.value, props2.timezone);
+      })
     );
     const handleChange = (date) => {
       emits("change", date);
@@ -26989,6 +26999,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a;
       return ((_a = props2.commonUseList) == null ? void 0 : _a.length) ? props2.commonUseList : commonDateList;
     });
+    const dateDetailDisplayString = computed(() => {
+      var _a;
+      const commonDate = commonDateUseList.value.find((item) => {
+        var _a2, _b, _c, _d;
+        return Array(item.id) && ((_b = (_a2 = item.id).join) == null ? void 0 : _b.call(_a2, "_")) === ((_d = (_c = dateDetail.value) == null ? void 0 : _c.dateValue) == null ? void 0 : _d.join("_"));
+      });
+      if (commonDate) {
+        return commonDate.name;
+      }
+      return (_a = dateDetail.value) == null ? void 0 : _a.toDisplayString();
+    });
     useDatePickerProvider({
       commonUseList: commonDateUseList,
       format,
@@ -26996,7 +27017,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       t,
       timezoneInfo,
       version: computed(() => props2.version),
-      vildateTimeRange: computed(() => props2.validDateRange)
+      validateTimeRange: computed(() => props2.validDateRange)
     });
     onBeforeUnmount(() => {
       tooltipsShow.value = false;
@@ -27027,7 +27048,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       dateDetail.value = new DateRange(val, format.value, props2.timezone);
       const emitValue = dateDetail.value.toEmitValue();
       emits("update:modelValue", ...emitValue);
-      const canStore = commonDateUseList.value.some((item) => item[0] === start2 && item[1] === end2);
+      const canStore = commonDateUseList.value.some((item) => {
+        const startDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[0] : item[0];
+        const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
+        return startDate === start2 && endDate === end2;
+      });
       !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
     };
     const handleTimezoneChange = (val, info) => {
@@ -27133,7 +27158,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     createElementVNode(
                       "span",
                       null,
-                      toDisplayString(dateDetail.value.toDisplayString()),
+                      toDisplayString(dateDetailDisplayString.value),
                       1
                       /* TEXT */
                     ),

package/vue2/index.iife.min.js

@@ -30270,6 +30270,7 @@ ${$(r2)}`), n2;
       __publicField(this, "startDate");
       __publicField(this, "startNum");
       __publicField(this, "startUnit");
+      __publicField(this, "userDisplayName");
       this.dateValue = dateValue;
       this.format = format;
       this.timezome = timezome;
@@ -30368,6 +30369,9 @@ ${$(r2)}`), n2;
       if (!this.startDate || !this.endDate) return false;
       return (this.startDate.isSame(date.startDate, "ms") || this.startDate.isBefore(date.startDate)) && (this.endDate.isSame(date.endDate, "ms") || this.endDate.isAfter(date.endDate));
     }
+    setUserDisplayName(v2) {
+      this.userDisplayName = v2;
+    }
     toDisplayString() {
       var _a, _b;
       const {
@@ -30382,6 +30386,7 @@ ${$(r2)}`), n2;
         startNum,
         startUnit
       } = this;
+      if (this.userDisplayName) return this.userDisplayName;
       if (!startDate || !endDate || !isValidate) {
         return ((_a = this.dateValue) == null ? void 0 : _a.join(" ~ ")) || "";
       }
@@ -31981,16 +31986,16 @@ ${$(r2)}`), n2;
   };
   const useDatePickerInject = () => inject(DATE_PICKER_PROVIDER_KEY);
   const useValidate = () => {
-    const { format, timezoneInfo, vildateTimeRange } = useDatePickerInject();
+    const { format, timezoneInfo, validateTimeRange } = useDatePickerInject();
     const validDateRange = customRef((track2) => {
-      let date = new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+      let date = new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
       return {
         get() {
           var _a;
           track2();
-          if (((_a = vildateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
-          if (vildateTimeRange.value.some((v2) => typeof v2 === "string" && v2.includes("now")))
-            return new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+          if (((_a = validateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
+          if (validateTimeRange.value.some((v2) => typeof v2 === "string" && v2.includes("now")))
+            return new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
           return date;
         },
         set() {
@@ -33733,9 +33738,14 @@ ${$(r2)}`), n2;
       const browserTimezone = dayjs.tz.guess();
       const recentUseList = shallowRef(getStoreDateList(storeKey2.value));
       const dateList = computed(
-        () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map(
-          (date) => new DateRange(date, format.value, props2.timezone)
-        )
+        () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map((date) => {
+          if ((date == null ? void 0 : date.id) && date.name) {
+            const dateRange = new DateRange(date.id, format.value, props2.timezone);
+            dateRange.setUserDisplayName(date.name);
+            return dateRange;
+          }
+          return new DateRange(date, format.value, props2.timezone);
+        })
       );
       const handleChange = (date) => {
         emits("change", date);
@@ -34006,6 +34016,17 @@ ${$(r2)}`), n2;
         var _a;
         return ((_a = props2.commonUseList) == null ? void 0 : _a.length) ? props2.commonUseList : commonDateList;
       });
+      const dateDetailDisplayString = computed(() => {
+        var _a;
+        const commonDate = commonDateUseList.value.find((item) => {
+          var _a2, _b, _c, _d;
+          return Array(item.id) && ((_b = (_a2 = item.id).join) == null ? void 0 : _b.call(_a2, "_")) === ((_d = (_c = dateDetail.value) == null ? void 0 : _c.dateValue) == null ? void 0 : _d.join("_"));
+        });
+        if (commonDate) {
+          return commonDate.name;
+        }
+        return (_a = dateDetail.value) == null ? void 0 : _a.toDisplayString();
+      });
       useDatePickerProvider({
         commonUseList: commonDateUseList,
         format,
@@ -34013,7 +34034,7 @@ ${$(r2)}`), n2;
         t,
         timezoneInfo,
         version: computed(() => props2.version),
-        vildateTimeRange: computed(() => props2.validDateRange)
+        validateTimeRange: computed(() => props2.validDateRange)
       });
       onBeforeUnmount(() => {
         tooltipsShow.value = false;
@@ -34044,7 +34065,11 @@ ${$(r2)}`), n2;
         dateDetail.value = new DateRange(val, format.value, props2.timezone);
         const emitValue = dateDetail.value.toEmitValue();
         emits("update:modelValue", ...emitValue);
-        const canStore = commonDateUseList.value.some((item) => item[0] === start2 && item[1] === end2);
+        const canStore = commonDateUseList.value.some((item) => {
+          const startDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[0] : item[0];
+          const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
+          return startDate === start2 && endDate === end2;
+        });
         !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
@@ -34150,7 +34175,7 @@ ${$(r2)}`), n2;
                       createBaseVNode(
                         "span",
                         null,
-                        toDisplayString(dateDetail.value.toDisplayString()),
+                        toDisplayString(dateDetailDisplayString.value),
                         1
                         /* TEXT */
                       ),

package/vue2/index.umd.min.js

@@ -23268,6 +23268,7 @@ ${$(r2)}`), n2;
       __publicField(this, "startDate");
       __publicField(this, "startNum");
       __publicField(this, "startUnit");
+      __publicField(this, "userDisplayName");
       this.dateValue = dateValue;
       this.format = format;
       this.timezome = timezome;
@@ -23366,6 +23367,9 @@ ${$(r2)}`), n2;
       if (!this.startDate || !this.endDate) return false;
       return (this.startDate.isSame(date.startDate, "ms") || this.startDate.isBefore(date.startDate)) && (this.endDate.isSame(date.endDate, "ms") || this.endDate.isAfter(date.endDate));
     }
+    setUserDisplayName(v2) {
+      this.userDisplayName = v2;
+    }
     toDisplayString() {
       var _a, _b;
       const {
@@ -23380,6 +23384,7 @@ ${$(r2)}`), n2;
         startNum,
         startUnit
       } = this;
+      if (this.userDisplayName) return this.userDisplayName;
       if (!startDate || !endDate || !isValidate) {
         return ((_a = this.dateValue) == null ? void 0 : _a.join(" ~ ")) || "";
       }
@@ -24979,16 +24984,16 @@ ${$(r2)}`), n2;
   };
   const useDatePickerInject = () => __WEBPACK_EXTERNAL_MODULE_vue__.inject(DATE_PICKER_PROVIDER_KEY);
   const useValidate = () => {
-    const { format, timezoneInfo, vildateTimeRange } = useDatePickerInject();
+    const { format, timezoneInfo, validateTimeRange } = useDatePickerInject();
     const validDateRange = __WEBPACK_EXTERNAL_MODULE_vue__.customRef((track) => {
-      let date = new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+      let date = new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
       return {
         get() {
           var _a;
           track();
-          if (((_a = vildateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
-          if (vildateTimeRange.value.some((v2) => typeof v2 === "string" && v2.includes("now")))
-            return new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+          if (((_a = validateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
+          if (validateTimeRange.value.some((v2) => typeof v2 === "string" && v2.includes("now")))
+            return new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
           return date;
         },
         set() {
@@ -26731,9 +26736,14 @@ ${$(r2)}`), n2;
       const browserTimezone = dayjs.tz.guess();
       const recentUseList = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(getStoreDateList(storeKey2.value));
       const dateList = __WEBPACK_EXTERNAL_MODULE_vue__.computed(
-        () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map(
-          (date) => new DateRange(date, format.value, props2.timezone)
-        )
+        () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map((date) => {
+          if ((date == null ? void 0 : date.id) && date.name) {
+            const dateRange = new DateRange(date.id, format.value, props2.timezone);
+            dateRange.setUserDisplayName(date.name);
+            return dateRange;
+          }
+          return new DateRange(date, format.value, props2.timezone);
+        })
       );
       const handleChange = (date) => {
         emits("change", date);
@@ -27004,6 +27014,17 @@ ${$(r2)}`), n2;
         var _a;
         return ((_a = props2.commonUseList) == null ? void 0 : _a.length) ? props2.commonUseList : commonDateList;
       });
+      const dateDetailDisplayString = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => {
+        var _a;
+        const commonDate = commonDateUseList.value.find((item) => {
+          var _a2, _b, _c, _d;
+          return Array(item.id) && ((_b = (_a2 = item.id).join) == null ? void 0 : _b.call(_a2, "_")) === ((_d = (_c = dateDetail.value) == null ? void 0 : _c.dateValue) == null ? void 0 : _d.join("_"));
+        });
+        if (commonDate) {
+          return commonDate.name;
+        }
+        return (_a = dateDetail.value) == null ? void 0 : _a.toDisplayString();
+      });
       useDatePickerProvider({
         commonUseList: commonDateUseList,
         format,
@@ -27011,7 +27032,7 @@ ${$(r2)}`), n2;
         t,
         timezoneInfo,
         version: __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => props2.version),
-        vildateTimeRange: __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => props2.validDateRange)
+        validateTimeRange: __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => props2.validDateRange)
       });
       __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount(() => {
         tooltipsShow.value = false;
@@ -27042,7 +27063,11 @@ ${$(r2)}`), n2;
         dateDetail.value = new DateRange(val, format.value, props2.timezone);
         const emitValue = dateDetail.value.toEmitValue();
         emits("update:modelValue", ...emitValue);
-        const canStore = commonDateUseList.value.some((item) => item[0] === start2 && item[1] === end2);
+        const canStore = commonDateUseList.value.some((item) => {
+          const startDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[0] : item[0];
+          const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
+          return startDate === start2 && endDate === end2;
+        });
         !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
@@ -27148,7 +27173,7 @@ ${$(r2)}`), n2;
                       __WEBPACK_EXTERNAL_MODULE_vue__.createElementVNode(
                         "span",
                         null,
-                        __WEBPACK_EXTERNAL_MODULE_vue__.toDisplayString(dateDetail.value.toDisplayString()),
+                        __WEBPACK_EXTERNAL_MODULE_vue__.toDisplayString(dateDetailDisplayString.value),
                         1
                         /* TEXT */
                       ),

package/vue3/index.es.min.js

@@ -338,6 +338,7 @@ class DateRange {
     __publicField(this, "startDate");
     __publicField(this, "startNum");
     __publicField(this, "startUnit");
+    __publicField(this, "userDisplayName");
     this.dateValue = dateValue;
     this.format = format;
     this.timezome = timezome;
@@ -436,6 +437,9 @@ class DateRange {
     if (!this.startDate || !this.endDate) return false;
     return (this.startDate.isSame(date.startDate, "ms") || this.startDate.isBefore(date.startDate)) && (this.endDate.isSame(date.endDate, "ms") || this.endDate.isAfter(date.endDate));
   }
+  setUserDisplayName(v) {
+    this.userDisplayName = v;
+  }
   toDisplayString() {
     var _a, _b;
     const {
@@ -450,6 +454,7 @@ class DateRange {
       startNum,
       startUnit
     } = this;
+    if (this.userDisplayName) return this.userDisplayName;
     if (!startDate || !endDate || !isValidate) {
       return ((_a = this.dateValue) == null ? void 0 : _a.join(" ~ ")) || "";
     }
@@ -2049,16 +2054,16 @@ const useDatePickerProvider = (data) => {
 };
 const useDatePickerInject = () => inject(DATE_PICKER_PROVIDER_KEY);
 const useValidate = () => {
-  const { format, timezoneInfo, vildateTimeRange } = useDatePickerInject();
+  const { format, timezoneInfo, validateTimeRange } = useDatePickerInject();
   const validDateRange = customRef((track) => {
-    let date = new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+    let date = new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
     return {
       get() {
         var _a;
         track();
-        if (((_a = vildateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
-        if (vildateTimeRange.value.some((v) => typeof v === "string" && v.includes("now")))
-          return new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+        if (((_a = validateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
+        if (validateTimeRange.value.some((v) => typeof v === "string" && v.includes("now")))
+          return new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
         return date;
       },
       set() {
@@ -3801,9 +3806,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const browserTimezone = dayjs.tz.guess();
     const recentUseList = shallowRef(getStoreDateList(storeKey2.value));
     const dateList = computed(
-      () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map(
-        (date) => new DateRange(date, format.value, props.timezone)
-      )
+      () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map((date) => {
+        if ((date == null ? void 0 : date.id) && date.name) {
+          const dateRange = new DateRange(date.id, format.value, props.timezone);
+          dateRange.setUserDisplayName(date.name);
+          return dateRange;
+        }
+        return new DateRange(date, format.value, props.timezone);
+      })
     );
     const handleChange = (date) => {
       emits("change", date);
@@ -4074,6 +4084,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a;
       return ((_a = props.commonUseList) == null ? void 0 : _a.length) ? props.commonUseList : commonDateList;
     });
+    const dateDetailDisplayString = computed(() => {
+      var _a;
+      const commonDate = commonDateUseList.value.find((item) => {
+        var _a2, _b, _c, _d;
+        return Array(item.id) && ((_b = (_a2 = item.id).join) == null ? void 0 : _b.call(_a2, "_")) === ((_d = (_c = dateDetail.value) == null ? void 0 : _c.dateValue) == null ? void 0 : _d.join("_"));
+      });
+      if (commonDate) {
+        return commonDate.name;
+      }
+      return (_a = dateDetail.value) == null ? void 0 : _a.toDisplayString();
+    });
     useDatePickerProvider({
       commonUseList: commonDateUseList,
       format,
@@ -4081,7 +4102,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       t,
       timezoneInfo,
       version: computed(() => props.version),
-      vildateTimeRange: computed(() => props.validDateRange)
+      validateTimeRange: computed(() => props.validDateRange)
     });
     onBeforeUnmount(() => {
       tooltipsShow.value = false;
@@ -4112,7 +4133,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       dateDetail.value = new DateRange(val, format.value, props.timezone);
       const emitValue = dateDetail.value.toEmitValue();
       emits("update:modelValue", ...emitValue);
-      const canStore = commonDateUseList.value.some((item) => item[0] === start && item[1] === end);
+      const canStore = commonDateUseList.value.some((item) => {
+        const startDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[0] : item[0];
+        const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
+        return startDate === start && endDate === end;
+      });
       !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
     };
     const handleTimezoneChange = (val, info) => {
@@ -4218,7 +4243,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     createElementVNode(
                       "span",
                       null,
-                      toDisplayString(dateDetail.value.toDisplayString()),
+                      toDisplayString(dateDetailDisplayString.value),
                       1
                       /* TEXT */
                     ),

package/vue3/index.iife.min.js

@@ -23871,6 +23871,7 @@ ${$(r2)}`), n2;
       __publicField(this, "startDate");
       __publicField(this, "startNum");
       __publicField(this, "startUnit");
+      __publicField(this, "userDisplayName");
       this.dateValue = dateValue;
       this.format = format;
       this.timezome = timezome;
@@ -23969,6 +23970,9 @@ ${$(r2)}`), n2;
       if (!this.startDate || !this.endDate) return false;
       return (this.startDate.isSame(date.startDate, "ms") || this.startDate.isBefore(date.startDate)) && (this.endDate.isSame(date.endDate, "ms") || this.endDate.isAfter(date.endDate));
     }
+    setUserDisplayName(v2) {
+      this.userDisplayName = v2;
+    }
     toDisplayString() {
       var _a, _b;
       const {
@@ -23983,6 +23987,7 @@ ${$(r2)}`), n2;
         startNum,
         startUnit
       } = this;
+      if (this.userDisplayName) return this.userDisplayName;
       if (!startDate || !endDate || !isValidate) {
         return ((_a = this.dateValue) == null ? void 0 : _a.join(" ~ ")) || "";
       }
@@ -25582,16 +25587,16 @@ ${$(r2)}`), n2;
   };
   const useDatePickerInject = () => __WEBPACK_EXTERNAL_MODULE_vue__.inject(DATE_PICKER_PROVIDER_KEY);
   const useValidate = () => {
-    const { format, timezoneInfo, vildateTimeRange } = useDatePickerInject();
+    const { format, timezoneInfo, validateTimeRange } = useDatePickerInject();
     const validDateRange = __WEBPACK_EXTERNAL_MODULE_vue__.customRef((track) => {
-      let date = new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+      let date = new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
       return {
         get() {
           var _a;
           track();
-          if (((_a = vildateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
-          if (vildateTimeRange.value.some((v2) => typeof v2 === "string" && v2.includes("now")))
-            return new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+          if (((_a = validateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
+          if (validateTimeRange.value.some((v2) => typeof v2 === "string" && v2.includes("now")))
+            return new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
           return date;
         },
         set() {
@@ -27334,9 +27339,14 @@ ${$(r2)}`), n2;
       const browserTimezone = dayjs.tz.guess();
       const recentUseList = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(getStoreDateList(storeKey2.value));
       const dateList = __WEBPACK_EXTERNAL_MODULE_vue__.computed(
-        () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map(
-          (date) => new DateRange(date, format.value, props2.timezone)
-        )
+        () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map((date) => {
+          if ((date == null ? void 0 : date.id) && date.name) {
+            const dateRange = new DateRange(date.id, format.value, props2.timezone);
+            dateRange.setUserDisplayName(date.name);
+            return dateRange;
+          }
+          return new DateRange(date, format.value, props2.timezone);
+        })
       );
       const handleChange = (date) => {
         emits("change", date);
@@ -27607,6 +27617,17 @@ ${$(r2)}`), n2;
         var _a;
         return ((_a = props2.commonUseList) == null ? void 0 : _a.length) ? props2.commonUseList : commonDateList;
       });
+      const dateDetailDisplayString = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => {
+        var _a;
+        const commonDate = commonDateUseList.value.find((item) => {
+          var _a2, _b, _c, _d;
+          return Array(item.id) && ((_b = (_a2 = item.id).join) == null ? void 0 : _b.call(_a2, "_")) === ((_d = (_c = dateDetail.value) == null ? void 0 : _c.dateValue) == null ? void 0 : _d.join("_"));
+        });
+        if (commonDate) {
+          return commonDate.name;
+        }
+        return (_a = dateDetail.value) == null ? void 0 : _a.toDisplayString();
+      });
       useDatePickerProvider({
         commonUseList: commonDateUseList,
         format,
@@ -27614,7 +27635,7 @@ ${$(r2)}`), n2;
         t,
         timezoneInfo,
         version: __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => props2.version),
-        vildateTimeRange: __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => props2.validDateRange)
+        validateTimeRange: __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => props2.validDateRange)
       });
       __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount(() => {
         tooltipsShow.value = false;
@@ -27645,7 +27666,11 @@ ${$(r2)}`), n2;
         dateDetail.value = new DateRange(val, format.value, props2.timezone);
         const emitValue = dateDetail.value.toEmitValue();
         emits("update:modelValue", ...emitValue);
-        const canStore = commonDateUseList.value.some((item) => item[0] === start2 && item[1] === end2);
+        const canStore = commonDateUseList.value.some((item) => {
+          const startDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[0] : item[0];
+          const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
+          return startDate === start2 && endDate === end2;
+        });
         !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
@@ -27751,7 +27776,7 @@ ${$(r2)}`), n2;
                       __WEBPACK_EXTERNAL_MODULE_vue__.createElementVNode(
                         "span",
                         null,
-                        __WEBPACK_EXTERNAL_MODULE_vue__.toDisplayString(dateDetail.value.toDisplayString()),
+                        __WEBPACK_EXTERNAL_MODULE_vue__.toDisplayString(dateDetailDisplayString.value),
                         1
                         /* TEXT */
                       ),

package/vue3/index.umd.min.js

@@ -334,6 +334,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "startDate");
       __publicField(this, "startNum");
       __publicField(this, "startUnit");
+      __publicField(this, "userDisplayName");
       this.dateValue = dateValue;
       this.format = format;
       this.timezome = timezome;
@@ -432,6 +433,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (!this.startDate || !this.endDate) return false;
       return (this.startDate.isSame(date.startDate, "ms") || this.startDate.isBefore(date.startDate)) && (this.endDate.isSame(date.endDate, "ms") || this.endDate.isAfter(date.endDate));
     }
+    setUserDisplayName(v) {
+      this.userDisplayName = v;
+    }
     toDisplayString() {
       var _a, _b;
       const {
@@ -446,6 +450,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         startNum,
         startUnit
       } = this;
+      if (this.userDisplayName) return this.userDisplayName;
       if (!startDate || !endDate || !isValidate) {
         return ((_a = this.dateValue) == null ? void 0 : _a.join(" ~ ")) || "";
       }
@@ -2045,16 +2050,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const useDatePickerInject = () => vue.inject(DATE_PICKER_PROVIDER_KEY);
   const useValidate = () => {
-    const { format, timezoneInfo, vildateTimeRange } = useDatePickerInject();
+    const { format, timezoneInfo, validateTimeRange } = useDatePickerInject();
     const validDateRange = vue.customRef((track) => {
-      let date = new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+      let date = new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
       return {
         get() {
           var _a;
           track();
-          if (((_a = vildateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
-          if (vildateTimeRange.value.some((v) => typeof v === "string" && v.includes("now")))
-            return new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+          if (((_a = validateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
+          if (validateTimeRange.value.some((v) => typeof v === "string" && v.includes("now")))
+            return new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
           return date;
         },
         set() {
@@ -3797,9 +3802,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const browserTimezone = dayjs.tz.guess();
       const recentUseList = vue.shallowRef(getStoreDateList(storeKey2.value));
       const dateList = vue.computed(
-        () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map(
-          (date) => new DateRange(date, format.value, props.timezone)
-        )
+        () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map((date) => {
+          if ((date == null ? void 0 : date.id) && date.name) {
+            const dateRange = new DateRange(date.id, format.value, props.timezone);
+            dateRange.setUserDisplayName(date.name);
+            return dateRange;
+          }
+          return new DateRange(date, format.value, props.timezone);
+        })
       );
       const handleChange = (date) => {
         emits("change", date);
@@ -4070,6 +4080,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         var _a;
         return ((_a = props.commonUseList) == null ? void 0 : _a.length) ? props.commonUseList : commonDateList;
       });
+      const dateDetailDisplayString = vue.computed(() => {
+        var _a;
+        const commonDate = commonDateUseList.value.find((item) => {
+          var _a2, _b, _c, _d;
+          return Array(item.id) && ((_b = (_a2 = item.id).join) == null ? void 0 : _b.call(_a2, "_")) === ((_d = (_c = dateDetail.value) == null ? void 0 : _c.dateValue) == null ? void 0 : _d.join("_"));
+        });
+        if (commonDate) {
+          return commonDate.name;
+        }
+        return (_a = dateDetail.value) == null ? void 0 : _a.toDisplayString();
+      });
       useDatePickerProvider({
         commonUseList: commonDateUseList,
         format,
@@ -4077,7 +4098,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         t,
         timezoneInfo,
         version: vue.computed(() => props.version),
-        vildateTimeRange: vue.computed(() => props.validDateRange)
+        validateTimeRange: vue.computed(() => props.validDateRange)
       });
       vue.onBeforeUnmount(() => {
         tooltipsShow.value = false;
@@ -4108,7 +4129,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         dateDetail.value = new DateRange(val, format.value, props.timezone);
         const emitValue = dateDetail.value.toEmitValue();
         emits("update:modelValue", ...emitValue);
-        const canStore = commonDateUseList.value.some((item) => item[0] === start && item[1] === end);
+        const canStore = commonDateUseList.value.some((item) => {
+          const startDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[0] : item[0];
+          const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
+          return startDate === start && endDate === end;
+        });
         !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
@@ -4214,7 +4239,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       vue.createElementVNode(
                         "span",
                         null,
-                        vue.toDisplayString(dateDetail.value.toDisplayString()),
+                        vue.toDisplayString(dateDetailDisplayString.value),
                         1
                         /* TEXT */
                       ),