@blueking/date-picker 3.0.2 → 3.0.4

package/package.json

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

package/vue2/index.es.min.js

@@ -24494,6 +24494,40 @@ const t = (key) => {
 };
 dayjs.extend(utc);
 dayjs.extend(tz);
+const getDynamicTimezoneInfo = (timezone) => {
+  try {
+    const now2 = dayjs().tz(timezone);
+    const offsetMinutes = now2.utcOffset();
+    const hours = Math.floor(Math.abs(offsetMinutes) / 60);
+    const minutes = Math.abs(offsetMinutes) % 60;
+    const sign = offsetMinutes >= 0 ? "+" : "-";
+    const utcOffset = minutes > 0 ? `utc${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}` : `utc${sign}${String(hours).padStart(2, "0")}:00`;
+    const abbreviation = getTimezoneAbbreviation(timezone);
+    return { abbreviation: abbreviation.toLowerCase(), utcOffset: utcOffset.toLowerCase() };
+  } catch {
+    return { abbreviation: "", utcOffset: "" };
+  }
+};
+const getTimezoneAbbreviation = (timezone) => {
+  try {
+    const formatter = new Intl.DateTimeFormat("en-US", {
+      timeZone: timezone,
+      timeZoneName: "short"
+    });
+    const parts = formatter.formatToParts(/* @__PURE__ */ new Date());
+    const tzPart = parts.find((part) => part.type === "timeZoneName");
+    return (tzPart == null ? void 0 : tzPart.value) || "";
+  } catch {
+    return "";
+  }
+};
+const updateSearchIndex = (searchIndex, timezone) => {
+  const parts = searchIndex.split("|");
+  const { abbreviation, utcOffset } = getDynamicTimezoneInfo(timezone);
+  parts[1] = abbreviation;
+  parts[2] = utcOffset;
+  return parts.join("|");
+};
 const timezoneData = [
   {
     label: "Africa",
@@ -25838,9 +25872,11 @@ const getTimezoneDetails = () => {
     return {
       label: group.label,
       options: group.options.map((option) => {
+        const dynamicSearchIndex = updateSearchIndex(option.searchIndex, option.value);
         const info = {
           ...option,
-          ...getTimezoneInfo(option.searchIndex)
+          searchIndex: dynamicSearchIndex,
+          ...getTimezoneInfo(dynamicSearchIndex)
         };
         if (option.value === browserTimeZone) {
           defaultTimezoneList.push({
@@ -28563,7 +28599,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const props2 = __props;
     const emits = __emit;
-    const dateTooltipsRef = ref();
     const dateContentRef = ref();
     const format = ref(props2.format);
     const timezoneInfo = computed(() => {
@@ -28581,8 +28616,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const b2 = dayjs.tz(dayjs(), timezone).utcOffset();
       return (b2 - a2) / 60;
     });
-    const dateDetail = shallowRef(new DateRange(props2.modelValue, props2.format, props2.timezone));
-    const tooltipsDetail = shallowRef();
+    const dateDetail = shallowRef(new DateRange(props2.modelValue, props2.format));
+    const tooltipsDetail = shallowRef(new DateRange(dateDetail.value.dateValue, format.value));
     const storeKey2 = computed(() => getStoreKey(props2.version));
     const datePanelShow = ref(false);
     const tooltipsShow = ref(false);
@@ -28644,14 +28679,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tooltipsShow.value = false;
       datePanelShow.value = false;
     });
+    watch([() => props2.modelValue, () => props2.format, () => props2.timezone], () => {
+      tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
+    });
     function handleDateMouseenter() {
       if (enterTimer) return;
       enterTimer = setTimeout(() => {
         tooltipsShow.value = true;
-        console.log("handleDateMouseenter", dateDetail.value, format.value, timezoneInfo.value.label);
-        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
         enterTimer = null;
-      }, 300);
+      }, 100);
     }
     function handleDateMouseleave() {
       if (leaveTimer) clearTimeout(leaveTimer);
@@ -28673,9 +28709,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
         return startDate === start2 && endDate === end2;
       });
-      if (canStore && dateDetail.value.isValidate) {
-        setStoreDateList(val, storeKey2.value);
-      }
+      !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
     };
     const handleTimezoneChange = (val, info) => {
       dateDetail.value = new DateRange(props2.modelValue, format.value, val);
@@ -28846,8 +28880,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode(
                   "div",
                   {
-                    ref_key: "dateTooltipsRef",
-                    ref: dateTooltipsRef,
+                    ref: "dateTooltipsRef",
                     class: "__date-tooltips__",
                     style: normalizeStyle({ maxWidth: unref(lang) === "en" ? "210px" : "156px" })
                   },

package/vue2/index.iife.min.js

@@ -32065,6 +32065,40 @@ ${$(r2)}`), n2;
   };
   dayjs.extend(utc);
   dayjs.extend(tz);
+  const getDynamicTimezoneInfo = (timezone2) => {
+    try {
+      const now2 = dayjs().tz(timezone2);
+      const offsetMinutes = now2.utcOffset();
+      const hours = Math.floor(Math.abs(offsetMinutes) / 60);
+      const minutes = Math.abs(offsetMinutes) % 60;
+      const sign = offsetMinutes >= 0 ? "+" : "-";
+      const utcOffset = minutes > 0 ? `utc${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}` : `utc${sign}${String(hours).padStart(2, "0")}:00`;
+      const abbreviation = getTimezoneAbbreviation(timezone2);
+      return { abbreviation: abbreviation.toLowerCase(), utcOffset: utcOffset.toLowerCase() };
+    } catch {
+      return { abbreviation: "", utcOffset: "" };
+    }
+  };
+  const getTimezoneAbbreviation = (timezone2) => {
+    try {
+      const formatter = new Intl.DateTimeFormat("en-US", {
+        timeZone: timezone2,
+        timeZoneName: "short"
+      });
+      const parts = formatter.formatToParts(/* @__PURE__ */ new Date());
+      const tzPart = parts.find((part) => part.type === "timeZoneName");
+      return (tzPart == null ? void 0 : tzPart.value) || "";
+    } catch {
+      return "";
+    }
+  };
+  const updateSearchIndex = (searchIndex, timezone2) => {
+    const parts = searchIndex.split("|");
+    const { abbreviation, utcOffset } = getDynamicTimezoneInfo(timezone2);
+    parts[1] = abbreviation;
+    parts[2] = utcOffset;
+    return parts.join("|");
+  };
   const timezoneData = [
     {
       label: "Africa",
@@ -33409,9 +33443,11 @@ ${$(r2)}`), n2;
       return {
         label: group.label,
         options: group.options.map((option) => {
+          const dynamicSearchIndex = updateSearchIndex(option.searchIndex, option.value);
           const info = {
             ...option,
-            ...getTimezoneInfo(option.searchIndex)
+            searchIndex: dynamicSearchIndex,
+            ...getTimezoneInfo(dynamicSearchIndex)
           };
           if (option.value === browserTimeZone) {
             defaultTimezoneList.push({
@@ -36166,7 +36202,6 @@ ${$(r2)}`), n2;
       });
       const props2 = __props;
       const emits = __emit;
-      const dateTooltipsRef = ref();
       const dateContentRef = ref();
       const format = ref(props2.format);
       const timezoneInfo = computed(() => {
@@ -36184,8 +36219,8 @@ ${$(r2)}`), n2;
         const b2 = dayjs.tz(dayjs(), timezone2).utcOffset();
         return (b2 - a2) / 60;
       });
-      const dateDetail = shallowRef(new DateRange(props2.modelValue, props2.format, props2.timezone));
-      const tooltipsDetail = shallowRef();
+      const dateDetail = shallowRef(new DateRange(props2.modelValue, props2.format));
+      const tooltipsDetail = shallowRef(new DateRange(dateDetail.value.dateValue, format.value));
       const storeKey2 = computed(() => getStoreKey(props2.version));
       const datePanelShow = ref(false);
       const tooltipsShow = ref(false);
@@ -36247,14 +36282,15 @@ ${$(r2)}`), n2;
         tooltipsShow.value = false;
         datePanelShow.value = false;
       });
+      watch([() => props2.modelValue, () => props2.format, () => props2.timezone], () => {
+        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
+      });
       function handleDateMouseenter() {
         if (enterTimer) return;
         enterTimer = setTimeout(() => {
           tooltipsShow.value = true;
-          console.log("handleDateMouseenter", dateDetail.value, format.value, timezoneInfo.value.label);
-          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
           enterTimer = null;
-        }, 300);
+        }, 100);
       }
       function handleDateMouseleave() {
         if (leaveTimer) clearTimeout(leaveTimer);
@@ -36276,9 +36312,7 @@ ${$(r2)}`), n2;
           const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
           return startDate === start2 && endDate === end2;
         });
-        if (canStore && dateDetail.value.isValidate) {
-          setStoreDateList(val, storeKey2.value);
-        }
+        !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
         dateDetail.value = new DateRange(props2.modelValue, format.value, val);
@@ -36449,8 +36483,7 @@ ${$(r2)}`), n2;
                   createBaseVNode(
                     "div",
                     {
-                      ref_key: "dateTooltipsRef",
-                      ref: dateTooltipsRef,
+                      ref: "dateTooltipsRef",
                       class: "__date-tooltips__",
                       style: normalizeStyle({ maxWidth: unref(lang) === "en" ? "210px" : "156px" })
                     },

package/vue2/index.umd.min.js

@@ -24509,6 +24509,40 @@ ${$(r2)}`), n2;
   };
   dayjs.extend(utc);
   dayjs.extend(tz);
+  const getDynamicTimezoneInfo = (timezone) => {
+    try {
+      const now2 = dayjs().tz(timezone);
+      const offsetMinutes = now2.utcOffset();
+      const hours = Math.floor(Math.abs(offsetMinutes) / 60);
+      const minutes = Math.abs(offsetMinutes) % 60;
+      const sign = offsetMinutes >= 0 ? "+" : "-";
+      const utcOffset = minutes > 0 ? `utc${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}` : `utc${sign}${String(hours).padStart(2, "0")}:00`;
+      const abbreviation = getTimezoneAbbreviation(timezone);
+      return { abbreviation: abbreviation.toLowerCase(), utcOffset: utcOffset.toLowerCase() };
+    } catch {
+      return { abbreviation: "", utcOffset: "" };
+    }
+  };
+  const getTimezoneAbbreviation = (timezone) => {
+    try {
+      const formatter = new Intl.DateTimeFormat("en-US", {
+        timeZone: timezone,
+        timeZoneName: "short"
+      });
+      const parts = formatter.formatToParts(/* @__PURE__ */ new Date());
+      const tzPart = parts.find((part) => part.type === "timeZoneName");
+      return (tzPart == null ? void 0 : tzPart.value) || "";
+    } catch {
+      return "";
+    }
+  };
+  const updateSearchIndex = (searchIndex, timezone) => {
+    const parts = searchIndex.split("|");
+    const { abbreviation, utcOffset } = getDynamicTimezoneInfo(timezone);
+    parts[1] = abbreviation;
+    parts[2] = utcOffset;
+    return parts.join("|");
+  };
   const timezoneData = [
     {
       label: "Africa",
@@ -25853,9 +25887,11 @@ ${$(r2)}`), n2;
       return {
         label: group.label,
         options: group.options.map((option) => {
+          const dynamicSearchIndex = updateSearchIndex(option.searchIndex, option.value);
           const info = {
             ...option,
-            ...getTimezoneInfo(option.searchIndex)
+            searchIndex: dynamicSearchIndex,
+            ...getTimezoneInfo(dynamicSearchIndex)
           };
           if (option.value === browserTimeZone) {
             defaultTimezoneList.push({
@@ -28578,7 +28614,6 @@ ${$(r2)}`), n2;
       });
       const props2 = __props;
       const emits = __emit;
-      const dateTooltipsRef = __WEBPACK_EXTERNAL_MODULE_vue__.ref();
       const dateContentRef = __WEBPACK_EXTERNAL_MODULE_vue__.ref();
       const format = __WEBPACK_EXTERNAL_MODULE_vue__.ref(props2.format);
       const timezoneInfo = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => {
@@ -28596,8 +28631,8 @@ ${$(r2)}`), n2;
         const b2 = dayjs.tz(dayjs(), timezone).utcOffset();
         return (b2 - a2) / 60;
       });
-      const dateDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(new DateRange(props2.modelValue, props2.format, props2.timezone));
-      const tooltipsDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef();
+      const dateDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(new DateRange(props2.modelValue, props2.format));
+      const tooltipsDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(new DateRange(dateDetail.value.dateValue, format.value));
       const storeKey2 = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => getStoreKey(props2.version));
       const datePanelShow = __WEBPACK_EXTERNAL_MODULE_vue__.ref(false);
       const tooltipsShow = __WEBPACK_EXTERNAL_MODULE_vue__.ref(false);
@@ -28659,14 +28694,15 @@ ${$(r2)}`), n2;
         tooltipsShow.value = false;
         datePanelShow.value = false;
       });
+      __WEBPACK_EXTERNAL_MODULE_vue__.watch([() => props2.modelValue, () => props2.format, () => props2.timezone], () => {
+        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
+      });
       function handleDateMouseenter() {
         if (enterTimer) return;
         enterTimer = setTimeout(() => {
           tooltipsShow.value = true;
-          console.log("handleDateMouseenter", dateDetail.value, format.value, timezoneInfo.value.label);
-          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
           enterTimer = null;
-        }, 300);
+        }, 100);
       }
       function handleDateMouseleave() {
         if (leaveTimer) clearTimeout(leaveTimer);
@@ -28688,9 +28724,7 @@ ${$(r2)}`), n2;
           const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
           return startDate === start2 && endDate === end2;
         });
-        if (canStore && dateDetail.value.isValidate) {
-          setStoreDateList(val, storeKey2.value);
-        }
+        !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
         dateDetail.value = new DateRange(props2.modelValue, format.value, val);
@@ -28861,8 +28895,7 @@ ${$(r2)}`), n2;
                   __WEBPACK_EXTERNAL_MODULE_vue__.createElementVNode(
                     "div",
                     {
-                      ref_key: "dateTooltipsRef",
-                      ref: dateTooltipsRef,
+                      ref: "dateTooltipsRef",
                       class: "__date-tooltips__",
                       style: __WEBPACK_EXTERNAL_MODULE_vue__.normalizeStyle({ maxWidth: __WEBPACK_EXTERNAL_MODULE_vue__.unref(lang) === "en" ? "210px" : "156px" })
                     },

package/vue3/index.es.min.js

@@ -112,6 +112,40 @@ const t = (key) => {
 };
 dayjs.extend(utc);
 dayjs.extend(tz);
+const getDynamicTimezoneInfo = (timezone) => {
+  try {
+    const now = dayjs().tz(timezone);
+    const offsetMinutes = now.utcOffset();
+    const hours = Math.floor(Math.abs(offsetMinutes) / 60);
+    const minutes = Math.abs(offsetMinutes) % 60;
+    const sign = offsetMinutes >= 0 ? "+" : "-";
+    const utcOffset = minutes > 0 ? `utc${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}` : `utc${sign}${String(hours).padStart(2, "0")}:00`;
+    const abbreviation = getTimezoneAbbreviation(timezone);
+    return { abbreviation: abbreviation.toLowerCase(), utcOffset: utcOffset.toLowerCase() };
+  } catch {
+    return { abbreviation: "", utcOffset: "" };
+  }
+};
+const getTimezoneAbbreviation = (timezone) => {
+  try {
+    const formatter = new Intl.DateTimeFormat("en-US", {
+      timeZone: timezone,
+      timeZoneName: "short"
+    });
+    const parts = formatter.formatToParts(/* @__PURE__ */ new Date());
+    const tzPart = parts.find((part) => part.type === "timeZoneName");
+    return (tzPart == null ? void 0 : tzPart.value) || "";
+  } catch {
+    return "";
+  }
+};
+const updateSearchIndex = (searchIndex, timezone) => {
+  const parts = searchIndex.split("|");
+  const { abbreviation, utcOffset } = getDynamicTimezoneInfo(timezone);
+  parts[1] = abbreviation;
+  parts[2] = utcOffset;
+  return parts.join("|");
+};
 const timezoneData = [
   {
     label: "Africa",
@@ -1456,9 +1490,11 @@ const getTimezoneDetails = () => {
     return {
       label: group.label,
       options: group.options.map((option) => {
+        const dynamicSearchIndex = updateSearchIndex(option.searchIndex, option.value);
         const info = {
           ...option,
-          ...getTimezoneInfo(option.searchIndex)
+          searchIndex: dynamicSearchIndex,
+          ...getTimezoneInfo(dynamicSearchIndex)
         };
         if (option.value === browserTimeZone) {
           defaultTimezoneList.push({
@@ -4181,7 +4217,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const props = __props;
     const emits = __emit;
-    const dateTooltipsRef = ref();
     const dateContentRef = ref();
     const format = ref(props.format);
     const timezoneInfo = computed(() => {
@@ -4199,8 +4234,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const b = dayjs.tz(dayjs(), timezone).utcOffset();
       return (b - a) / 60;
     });
-    const dateDetail = shallowRef(new DateRange(props.modelValue, props.format, props.timezone));
-    const tooltipsDetail = shallowRef();
+    const dateDetail = shallowRef(new DateRange(props.modelValue, props.format));
+    const tooltipsDetail = shallowRef(new DateRange(dateDetail.value.dateValue, format.value));
     const storeKey2 = computed(() => getStoreKey(props.version));
     const datePanelShow = ref(false);
     const tooltipsShow = ref(false);
@@ -4262,14 +4297,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tooltipsShow.value = false;
       datePanelShow.value = false;
     });
+    watch([() => props.modelValue, () => props.format, () => props.timezone], () => {
+      tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
+    });
     function handleDateMouseenter() {
       if (enterTimer) return;
       enterTimer = setTimeout(() => {
         tooltipsShow.value = true;
-        console.log("handleDateMouseenter", dateDetail.value, format.value, timezoneInfo.value.label);
-        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
         enterTimer = null;
-      }, 300);
+      }, 100);
     }
     function handleDateMouseleave() {
       if (leaveTimer) clearTimeout(leaveTimer);
@@ -4291,9 +4327,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
         return startDate === start && endDate === end;
       });
-      if (canStore && dateDetail.value.isValidate) {
-        setStoreDateList(val, storeKey2.value);
-      }
+      !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
     };
     const handleTimezoneChange = (val, info) => {
       dateDetail.value = new DateRange(props.modelValue, format.value, val);
@@ -4464,8 +4498,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode(
                   "div",
                   {
-                    ref_key: "dateTooltipsRef",
-                    ref: dateTooltipsRef,
+                    ref: "dateTooltipsRef",
                     class: "__date-tooltips__",
                     style: normalizeStyle({ maxWidth: unref(lang) === "en" ? "210px" : "156px" })
                   },

package/vue3/index.iife.min.js

@@ -25083,6 +25083,40 @@ ${$(r2)}`), n2;
   };
   dayjs.extend(utc);
   dayjs.extend(tz);
+  const getDynamicTimezoneInfo = (timezone2) => {
+    try {
+      const now2 = dayjs().tz(timezone2);
+      const offsetMinutes = now2.utcOffset();
+      const hours = Math.floor(Math.abs(offsetMinutes) / 60);
+      const minutes = Math.abs(offsetMinutes) % 60;
+      const sign = offsetMinutes >= 0 ? "+" : "-";
+      const utcOffset = minutes > 0 ? `utc${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}` : `utc${sign}${String(hours).padStart(2, "0")}:00`;
+      const abbreviation = getTimezoneAbbreviation(timezone2);
+      return { abbreviation: abbreviation.toLowerCase(), utcOffset: utcOffset.toLowerCase() };
+    } catch {
+      return { abbreviation: "", utcOffset: "" };
+    }
+  };
+  const getTimezoneAbbreviation = (timezone2) => {
+    try {
+      const formatter = new Intl.DateTimeFormat("en-US", {
+        timeZone: timezone2,
+        timeZoneName: "short"
+      });
+      const parts = formatter.formatToParts(/* @__PURE__ */ new Date());
+      const tzPart = parts.find((part) => part.type === "timeZoneName");
+      return (tzPart == null ? void 0 : tzPart.value) || "";
+    } catch {
+      return "";
+    }
+  };
+  const updateSearchIndex = (searchIndex, timezone2) => {
+    const parts = searchIndex.split("|");
+    const { abbreviation, utcOffset } = getDynamicTimezoneInfo(timezone2);
+    parts[1] = abbreviation;
+    parts[2] = utcOffset;
+    return parts.join("|");
+  };
   const timezoneData = [
     {
       label: "Africa",
@@ -26427,9 +26461,11 @@ ${$(r2)}`), n2;
       return {
         label: group.label,
         options: group.options.map((option) => {
+          const dynamicSearchIndex = updateSearchIndex(option.searchIndex, option.value);
           const info = {
             ...option,
-            ...getTimezoneInfo(option.searchIndex)
+            searchIndex: dynamicSearchIndex,
+            ...getTimezoneInfo(dynamicSearchIndex)
           };
           if (option.value === browserTimeZone) {
             defaultTimezoneList.push({
@@ -29184,7 +29220,6 @@ ${$(r2)}`), n2;
       });
       const props2 = __props;
       const emits = __emit;
-      const dateTooltipsRef = __WEBPACK_EXTERNAL_MODULE_vue__.ref();
       const dateContentRef = __WEBPACK_EXTERNAL_MODULE_vue__.ref();
       const format = __WEBPACK_EXTERNAL_MODULE_vue__.ref(props2.format);
       const timezoneInfo = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => {
@@ -29202,8 +29237,8 @@ ${$(r2)}`), n2;
         const b2 = dayjs.tz(dayjs(), timezone2).utcOffset();
         return (b2 - a2) / 60;
       });
-      const dateDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(new DateRange(props2.modelValue, props2.format, props2.timezone));
-      const tooltipsDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef();
+      const dateDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(new DateRange(props2.modelValue, props2.format));
+      const tooltipsDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(new DateRange(dateDetail.value.dateValue, format.value));
       const storeKey2 = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => getStoreKey(props2.version));
       const datePanelShow = __WEBPACK_EXTERNAL_MODULE_vue__.ref(false);
       const tooltipsShow = __WEBPACK_EXTERNAL_MODULE_vue__.ref(false);
@@ -29265,14 +29300,15 @@ ${$(r2)}`), n2;
         tooltipsShow.value = false;
         datePanelShow.value = false;
       });
+      __WEBPACK_EXTERNAL_MODULE_vue__.watch([() => props2.modelValue, () => props2.format, () => props2.timezone], () => {
+        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
+      });
       function handleDateMouseenter() {
         if (enterTimer) return;
         enterTimer = setTimeout(() => {
           tooltipsShow.value = true;
-          console.log("handleDateMouseenter", dateDetail.value, format.value, timezoneInfo.value.label);
-          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
           enterTimer = null;
-        }, 300);
+        }, 100);
       }
       function handleDateMouseleave() {
         if (leaveTimer) clearTimeout(leaveTimer);
@@ -29294,9 +29330,7 @@ ${$(r2)}`), n2;
           const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
           return startDate === start2 && endDate === end2;
         });
-        if (canStore && dateDetail.value.isValidate) {
-          setStoreDateList(val, storeKey2.value);
-        }
+        !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
         dateDetail.value = new DateRange(props2.modelValue, format.value, val);
@@ -29467,8 +29501,7 @@ ${$(r2)}`), n2;
                   __WEBPACK_EXTERNAL_MODULE_vue__.createElementVNode(
                     "div",
                     {
-                      ref_key: "dateTooltipsRef",
-                      ref: dateTooltipsRef,
+                      ref: "dateTooltipsRef",
                       class: "__date-tooltips__",
                       style: __WEBPACK_EXTERNAL_MODULE_vue__.normalizeStyle({ maxWidth: __WEBPACK_EXTERNAL_MODULE_vue__.unref(lang) === "en" ? "210px" : "156px" })
                     },

package/vue3/index.umd.min.js

@@ -108,6 +108,40 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   dayjs.extend(utc);
   dayjs.extend(tz);
+  const getDynamicTimezoneInfo = (timezone) => {
+    try {
+      const now = dayjs().tz(timezone);
+      const offsetMinutes = now.utcOffset();
+      const hours = Math.floor(Math.abs(offsetMinutes) / 60);
+      const minutes = Math.abs(offsetMinutes) % 60;
+      const sign = offsetMinutes >= 0 ? "+" : "-";
+      const utcOffset = minutes > 0 ? `utc${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}` : `utc${sign}${String(hours).padStart(2, "0")}:00`;
+      const abbreviation = getTimezoneAbbreviation(timezone);
+      return { abbreviation: abbreviation.toLowerCase(), utcOffset: utcOffset.toLowerCase() };
+    } catch {
+      return { abbreviation: "", utcOffset: "" };
+    }
+  };
+  const getTimezoneAbbreviation = (timezone) => {
+    try {
+      const formatter = new Intl.DateTimeFormat("en-US", {
+        timeZone: timezone,
+        timeZoneName: "short"
+      });
+      const parts = formatter.formatToParts(/* @__PURE__ */ new Date());
+      const tzPart = parts.find((part) => part.type === "timeZoneName");
+      return (tzPart == null ? void 0 : tzPart.value) || "";
+    } catch {
+      return "";
+    }
+  };
+  const updateSearchIndex = (searchIndex, timezone) => {
+    const parts = searchIndex.split("|");
+    const { abbreviation, utcOffset } = getDynamicTimezoneInfo(timezone);
+    parts[1] = abbreviation;
+    parts[2] = utcOffset;
+    return parts.join("|");
+  };
   const timezoneData = [
     {
       label: "Africa",
@@ -1452,9 +1486,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return {
         label: group.label,
         options: group.options.map((option) => {
+          const dynamicSearchIndex = updateSearchIndex(option.searchIndex, option.value);
           const info = {
             ...option,
-            ...getTimezoneInfo(option.searchIndex)
+            searchIndex: dynamicSearchIndex,
+            ...getTimezoneInfo(dynamicSearchIndex)
           };
           if (option.value === browserTimeZone) {
             defaultTimezoneList.push({
@@ -4177,7 +4213,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       });
       const props = __props;
       const emits = __emit;
-      const dateTooltipsRef = vue.ref();
       const dateContentRef = vue.ref();
       const format = vue.ref(props.format);
       const timezoneInfo = vue.computed(() => {
@@ -4195,8 +4230,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const b = dayjs.tz(dayjs(), timezone).utcOffset();
         return (b - a) / 60;
       });
-      const dateDetail = vue.shallowRef(new DateRange(props.modelValue, props.format, props.timezone));
-      const tooltipsDetail = vue.shallowRef();
+      const dateDetail = vue.shallowRef(new DateRange(props.modelValue, props.format));
+      const tooltipsDetail = vue.shallowRef(new DateRange(dateDetail.value.dateValue, format.value));
       const storeKey2 = vue.computed(() => getStoreKey(props.version));
       const datePanelShow = vue.ref(false);
       const tooltipsShow = vue.ref(false);
@@ -4258,14 +4293,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         tooltipsShow.value = false;
         datePanelShow.value = false;
       });
+      vue.watch([() => props.modelValue, () => props.format, () => props.timezone], () => {
+        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
+      });
       function handleDateMouseenter() {
         if (enterTimer) return;
         enterTimer = setTimeout(() => {
           tooltipsShow.value = true;
-          console.log("handleDateMouseenter", dateDetail.value, format.value, timezoneInfo.value.label);
-          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
           enterTimer = null;
-        }, 300);
+        }, 100);
       }
       function handleDateMouseleave() {
         if (leaveTimer) clearTimeout(leaveTimer);
@@ -4287,9 +4323,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
           return startDate === start && endDate === end;
         });
-        if (canStore && dateDetail.value.isValidate) {
-          setStoreDateList(val, storeKey2.value);
-        }
+        !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
         dateDetail.value = new DateRange(props.modelValue, format.value, val);
@@ -4460,8 +4494,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   vue.createElementVNode(
                     "div",
                     {
-                      ref_key: "dateTooltipsRef",
-                      ref: dateTooltipsRef,
+                      ref: "dateTooltipsRef",
                       class: "__date-tooltips__",
                       style: vue.normalizeStyle({ maxWidth: vue.unref(lang) === "en" ? "210px" : "156px" })
                     },