npm - @blueking/date-picker - Versions diffs - 2.0.0-beta.27 → 2.0.0-beta.28 - Mend

@blueking/date-picker 2.0.0-beta.27 → 2.0.0-beta.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/package.json CHANGED Viewed

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

package/typings/utils/date.d.ts CHANGED Viewed

@@ -46,3 +46,4 @@ export declare class DateRange {
 export declare const transformValue2Dayjs: (val: DateValue[number], type?: "end" | "start", timezome?: string) => dayjs.Dayjs | undefined;
 export declare const transformDateRange2Dayjs: (dateValue: DateValue, timezome?: string) => (dayjs.Dayjs | undefined)[];
 export declare const inputVal2Dayjs: (val: string, format: string, defaultDate?: Dayjs) => dayjs.Dayjs;
+export declare function getTimezoneOffset(timezone: string): number;

package/vue2/index.es.min.js CHANGED Viewed

@@ -23568,6 +23568,11 @@ const inputVal2Dayjs = (val, format, defaultDate) => {
   }
   return date;
 };
+function getTimezoneOffset(timezone) {
+  const localTime = dayjs().tz(timezone);
+  const offset2 = localTime.utcOffset() / 60;
+  return offset2;
+}
 dayjs.extend(utc);
 dayjs.extend(tz);
 const timezoneData = [
@@ -25426,6 +25431,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const today = dayjs();
     const isValidate = ref(true);
     const { validMsg, validateDateValue } = useValidate();
+    const curTimezoneInfo = ref(timezoneInfo.value || dayjs.tz.guess());
     watch(
       () => props2.value,
       (date) => {
@@ -25439,6 +25445,26 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
+    watch(
+      () => timezoneInfo,
+      (newTimezone) => {
+        if (!timezoneInfo.value) return;
+        if (newTimezone.value.label === curTimezoneInfo.value.label) return;
+        if (newTimezone.value.utc === curTimezoneInfo.value.utc) return;
+        curTimezoneInfo.value = newTimezone.value || dayjs.tz.guess();
+        if (startDate.value) {
+          startDate.value = dayjs.tz(startDate.value, curTimezoneInfo.value.label);
+          startInput.value.value = startDate.value.format(format.value);
+        }
+        if (endDate.value) {
+          endDate.value = dayjs.tz(endDate.value, curTimezoneInfo.value.label);
+          endInput.value.value = endDate.value.format(format.value);
+        }
+      },
+      {
+        deep: true
+      }
+    );
     const canConfirm = computed(() => {
       if (!startDate.value || !endDate.value) return false;
       if (!startDate.value.isValid() || !endDate.value.isValid()) return false;
@@ -25448,33 +25474,31 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       return true;
     });
     const handleInputEnter = async (_2, type) => {
-      setTimeout(() => {
-        var _a, _b, _c;
-        const target = type === "start" ? startInput.value : endInput.value;
-        const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
-        const editDate = type === "start" ? startDate.value : endDate.value;
-        const curNow = type === "start" ? isStartNow : isEndNow;
-        const otherNow = type === "start" ? isEndNow : isStartNow;
-        const formatValue = editDate == null ? void 0 : editDate.format(format.value);
-        if (val === formatValue) return;
-        if (!val || val === NowConstant && curNow.value) return;
-        if (val === NowConstant && !curNow.value && !otherNow.value) {
-          handleIsNowChange(type);
-          return;
-        }
-        let date = inputVal2Dayjs(val, format.value, editDate);
-        if (date.isValid()) {
-          if (!(editDate == null ? void 0 : editDate.isSame(date))) {
-            curNow.value = val === NowConstant;
-            if (type === "start") {
-              handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
-            } else {
-              handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
-            }
+      var _a, _b, _c;
+      const target = type === "start" ? startInput.value : endInput.value;
+      const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
+      const editDate = type === "start" ? startDate.value : endDate.value;
+      const curNow = type === "start" ? isStartNow : isEndNow;
+      const otherNow = type === "start" ? isEndNow : isStartNow;
+      const formatValue = editDate == null ? void 0 : editDate.format(format.value);
+      if (val === formatValue) return;
+      if (!val || val === NowConstant && curNow.value) return;
+      if (val === NowConstant && !curNow.value && !otherNow.value) {
+        handleIsNowChange(type);
+        return;
+      }
+      let date = inputVal2Dayjs(val, format.value, editDate);
+      if (date.isValid()) {
+        if (!(editDate == null ? void 0 : editDate.isSame(date))) {
+          curNow.value = val === NowConstant;
+          if (type === "start") {
+            handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
+          } else {
+            handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
           }
         }
-        target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
-      }, 16);
+      }
+      target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
     };
     const handleFocusStart = () => {
       showStartPanel.value = true;
@@ -25557,8 +25581,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
     const handleSubmit = () => {
       if (startDate.value && endDate.value) {
-        const startValue = isStartNow.value ? NowConstant : startDate.value.tz(timezoneInfo.value.label, true).valueOf();
-        const endValue = isEndNow.value ? NowConstant : endDate.value.tz(timezoneInfo.value.label, true).valueOf();
+        const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value), timezoneInfo.value.label).valueOf();
+        const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value), timezoneInfo.value.label).valueOf();
         isValidate.value = validateDateValue([startValue || "", endValue || ""]);
         if (!isValidate.value) return;
         emits("change", [startValue || "", endValue || ""]);
@@ -25592,10 +25616,11 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             },
             [
               _hoisted_3$4,
-              createVNode(unref(__webpack_exports__default$9), {
+              (openBlock(), createBlock(unref(__webpack_exports__default$9), {
                 "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-start__",
                 arrow: false,
                 "is-show": showStartPanel.value,
+                key: unref(timezoneInfo).label,
                 boundary: "parent",
                 placement: "bottom-start",
                 theme: "light",
@@ -25633,12 +25658,13 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 }),
                 _: 1
                 /* STABLE */
-              }, 8, ["is-show"]),
+              }, 8, ["is-show"])),
               _hoisted_5$3,
-              createVNode(unref(__webpack_exports__default$9), {
+              (openBlock(), createBlock(unref(__webpack_exports__default$9), {
                 "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-end__",
                 arrow: false,
                 "is-show": showEndPanel.value,
+                key: unref(timezoneInfo).label,
                 boundary: "parent",
                 placement: "bottom-start",
                 theme: "light",
@@ -25675,7 +25701,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 }),
                 _: 1
                 /* STABLE */
-              }, 8, ["is-show"]),
+              }, 8, ["is-show"])),
               !!(startDate.value || endDate.value) ? (openBlock(), createBlock(unref(__webpack_exports__default$m), {
                 key: 0,
                 class: "date-picker-clear",
@@ -26968,7 +26994,7 @@ 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 dateDetail = shallowRef(new DateRange(props2.modelValue, props2.format));
     const tooltipsDetail = shallowRef();
     const storeKey2 = computed(() => getStoreKey(props2.version));
     const datePanelShow = ref(false);
@@ -26979,7 +27005,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         var _a, _b;
         if (((_b = (_a = dateDetail.value) == null ? void 0 : _a.dateValue) == null ? void 0 : _b.length) && dateDetail.value.dateValue.every((item, index) => item === (v2 == null ? void 0 : v2[index])))
           return;
-        dateDetail.value = new DateRange(v2, format.value, props2.timezone);
+        dateDetail.value = new DateRange(v2, format.value);
       },
       {
         immediate: true
@@ -27008,7 +27034,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (enterTimer) return;
       enterTimer = setTimeout(() => {
         tooltipsShow.value = true;
-        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, props2.timezone);
+        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value);
         enterTimer = null;
       }, 100);
     }
@@ -27031,7 +27057,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
     };
     const handleTimezoneChange = (val, info) => {
-      dateDetail.value = new DateRange(props2.modelValue, format.value, val);
       emits("update:timezone", val, { ...info });
       sessionStorage.setItem(timezoneStoreKey, val);
     };
@@ -27045,8 +27070,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const durations = dateDetail.value.dateDuration();
       const val = type === "left" ? [startDate.subtract(durations), endDate.subtract(durations)] : [startDate.add(durations), endDate.add(durations)];
       if ((_b = props2.validDateRange) == null ? void 0 : _b.length) {
-        const validDateRange = new DateRange(props2.validDateRange, props2.format, props2.timezone);
-        if (!validDateRange.isInValidDateRange(new DateRange(val, props2.format, props2.timezone))) return;
+        const validDateRange = new DateRange(props2.validDateRange, props2.format);
+        if (!validDateRange.isInValidDateRange(new DateRange(val, props2.format))) return;
       }
       handleChange(val);
     };
@@ -27319,6 +27344,7 @@ export {
   futureDateRegexp,
   getStoreKey,
   getStoreTabKey,
+  getTimezoneOffset,
   inputVal2Dayjs,
   naturalDateRegexp,
   naturalDateShortcutMap,

package/vue2/index.iife.min.js CHANGED Viewed

@@ -30589,6 +30589,11 @@ ${$(r2)}`), n2;
     }
     return date;
   };
+  function getTimezoneOffset(timezone2) {
+    const localTime = dayjs().tz(timezone2);
+    const offset2 = localTime.utcOffset() / 60;
+    return offset2;
+  }
   dayjs.extend(utc);
   dayjs.extend(tz);
   const timezoneData = [
@@ -32447,6 +32452,7 @@ ${$(r2)}`), n2;
       const today = dayjs();
       const isValidate = ref(true);
       const { validMsg, validateDateValue } = useValidate();
+      const curTimezoneInfo = ref(timezoneInfo.value || dayjs.tz.guess());
       watch(
         () => props2.value,
         (date) => {
@@ -32460,6 +32466,26 @@ ${$(r2)}`), n2;
           immediate: true
         }
       );
+      watch(
+        () => timezoneInfo,
+        (newTimezone) => {
+          if (!timezoneInfo.value) return;
+          if (newTimezone.value.label === curTimezoneInfo.value.label) return;
+          if (newTimezone.value.utc === curTimezoneInfo.value.utc) return;
+          curTimezoneInfo.value = newTimezone.value || dayjs.tz.guess();
+          if (startDate.value) {
+            startDate.value = dayjs.tz(startDate.value, curTimezoneInfo.value.label);
+            startInput.value.value = startDate.value.format(format.value);
+          }
+          if (endDate.value) {
+            endDate.value = dayjs.tz(endDate.value, curTimezoneInfo.value.label);
+            endInput.value.value = endDate.value.format(format.value);
+          }
+        },
+        {
+          deep: true
+        }
+      );
       const canConfirm = computed(() => {
         if (!startDate.value || !endDate.value) return false;
         if (!startDate.value.isValid() || !endDate.value.isValid()) return false;
@@ -32469,33 +32495,31 @@ ${$(r2)}`), n2;
         return true;
       });
       const handleInputEnter = async (_2, type) => {
-        setTimeout(() => {
-          var _a, _b, _c;
-          const target = type === "start" ? startInput.value : endInput.value;
-          const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
-          const editDate = type === "start" ? startDate.value : endDate.value;
-          const curNow = type === "start" ? isStartNow : isEndNow;
-          const otherNow = type === "start" ? isEndNow : isStartNow;
-          const formatValue = editDate == null ? void 0 : editDate.format(format.value);
-          if (val === formatValue) return;
-          if (!val || val === NowConstant && curNow.value) return;
-          if (val === NowConstant && !curNow.value && !otherNow.value) {
-            handleIsNowChange(type);
-            return;
-          }
-          let date = inputVal2Dayjs(val, format.value, editDate);
-          if (date.isValid()) {
-            if (!(editDate == null ? void 0 : editDate.isSame(date))) {
-              curNow.value = val === NowConstant;
-              if (type === "start") {
-                handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
-              } else {
-                handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
-              }
+        var _a, _b, _c;
+        const target = type === "start" ? startInput.value : endInput.value;
+        const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
+        const editDate = type === "start" ? startDate.value : endDate.value;
+        const curNow = type === "start" ? isStartNow : isEndNow;
+        const otherNow = type === "start" ? isEndNow : isStartNow;
+        const formatValue = editDate == null ? void 0 : editDate.format(format.value);
+        if (val === formatValue) return;
+        if (!val || val === NowConstant && curNow.value) return;
+        if (val === NowConstant && !curNow.value && !otherNow.value) {
+          handleIsNowChange(type);
+          return;
+        }
+        let date = inputVal2Dayjs(val, format.value, editDate);
+        if (date.isValid()) {
+          if (!(editDate == null ? void 0 : editDate.isSame(date))) {
+            curNow.value = val === NowConstant;
+            if (type === "start") {
+              handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
+            } else {
+              handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
             }
           }
-          target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
-        }, 16);
+        }
+        target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
       };
       const handleFocusStart = () => {
         showStartPanel.value = true;
@@ -32578,8 +32602,8 @@ ${$(r2)}`), n2;
       };
       const handleSubmit = () => {
         if (startDate.value && endDate.value) {
-          const startValue = isStartNow.value ? NowConstant : startDate.value.tz(timezoneInfo.value.label, true).valueOf();
-          const endValue = isEndNow.value ? NowConstant : endDate.value.tz(timezoneInfo.value.label, true).valueOf();
+          const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value), timezoneInfo.value.label).valueOf();
+          const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value), timezoneInfo.value.label).valueOf();
           isValidate.value = validateDateValue([startValue || "", endValue || ""]);
           if (!isValidate.value) return;
           emits("change", [startValue || "", endValue || ""]);
@@ -32613,10 +32637,11 @@ ${$(r2)}`), n2;
               },
               [
                 _hoisted_3$4,
-                createVNode(unref(__webpack_exports__default$9), {
+                (openBlock(), createBlock(unref(__webpack_exports__default$9), {
                   "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-start__",
                   arrow: false,
                   "is-show": showStartPanel.value,
+                  key: unref(timezoneInfo).label,
                   boundary: "parent",
                   placement: "bottom-start",
                   theme: "light",
@@ -32654,12 +32679,13 @@ ${$(r2)}`), n2;
                   }),
                   _: 1
                   /* STABLE */
-                }, 8, ["is-show"]),
+                }, 8, ["is-show"])),
                 _hoisted_5$3,
-                createVNode(unref(__webpack_exports__default$9), {
+                (openBlock(), createBlock(unref(__webpack_exports__default$9), {
                   "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-end__",
                   arrow: false,
                   "is-show": showEndPanel.value,
+                  key: unref(timezoneInfo).label,
                   boundary: "parent",
                   placement: "bottom-start",
                   theme: "light",
@@ -32696,7 +32722,7 @@ ${$(r2)}`), n2;
                   }),
                   _: 1
                   /* STABLE */
-                }, 8, ["is-show"]),
+                }, 8, ["is-show"])),
                 !!(startDate.value || endDate.value) ? (openBlock(), createBlock(unref(__webpack_exports__default$m), {
                   key: 0,
                   class: "date-picker-clear",
@@ -33989,7 +34015,7 @@ ${$(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 dateDetail = shallowRef(new DateRange(props2.modelValue, props2.format));
       const tooltipsDetail = shallowRef();
       const storeKey2 = computed(() => getStoreKey(props2.version));
       const datePanelShow = ref(false);
@@ -34000,7 +34026,7 @@ ${$(r2)}`), n2;
           var _a, _b;
           if (((_b = (_a = dateDetail.value) == null ? void 0 : _a.dateValue) == null ? void 0 : _b.length) && dateDetail.value.dateValue.every((item, index) => item === (v2 == null ? void 0 : v2[index])))
             return;
-          dateDetail.value = new DateRange(v2, format.value, props2.timezone);
+          dateDetail.value = new DateRange(v2, format.value);
         },
         {
           immediate: true
@@ -34029,7 +34055,7 @@ ${$(r2)}`), n2;
         if (enterTimer) return;
         enterTimer = setTimeout(() => {
           tooltipsShow.value = true;
-          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, props2.timezone);
+          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value);
           enterTimer = null;
         }, 100);
       }
@@ -34052,7 +34078,6 @@ ${$(r2)}`), n2;
         !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
-        dateDetail.value = new DateRange(props2.modelValue, format.value, val);
         emits("update:timezone", val, { ...info });
         sessionStorage.setItem(timezoneStoreKey, val);
       };
@@ -34066,8 +34091,8 @@ ${$(r2)}`), n2;
         const durations = dateDetail.value.dateDuration();
         const val = type === "left" ? [startDate.subtract(durations), endDate.subtract(durations)] : [startDate.add(durations), endDate.add(durations)];
         if ((_b = props2.validDateRange) == null ? void 0 : _b.length) {
-          const validDateRange = new DateRange(props2.validDateRange, props2.format, props2.timezone);
-          if (!validDateRange.isInValidDateRange(new DateRange(val, props2.format, props2.timezone))) return;
+          const validDateRange = new DateRange(props2.validDateRange, props2.format);
+          if (!validDateRange.isInValidDateRange(new DateRange(val, props2.format))) return;
         }
         handleChange(val);
       };
@@ -34339,6 +34364,7 @@ ${$(r2)}`), n2;
   exports.futureDateRegexp = futureDateRegexp;
   exports.getStoreKey = getStoreKey;
   exports.getStoreTabKey = getStoreTabKey;
+  exports.getTimezoneOffset = getTimezoneOffset;
   exports.inputVal2Dayjs = inputVal2Dayjs;
   exports.naturalDateRegexp = naturalDateRegexp;
   exports.naturalDateShortcutMap = naturalDateShortcutMap;

package/vue2/index.umd.min.js CHANGED Viewed

@@ -23583,6 +23583,11 @@ ${$(r2)}`), n2;
     }
     return date;
   };
+  function getTimezoneOffset(timezone) {
+    const localTime = dayjs().tz(timezone);
+    const offset2 = localTime.utcOffset() / 60;
+    return offset2;
+  }
   dayjs.extend(utc);
   dayjs.extend(tz);
   const timezoneData = [
@@ -25441,6 +25446,7 @@ ${$(r2)}`), n2;
       const today = dayjs();
       const isValidate = __WEBPACK_EXTERNAL_MODULE_vue__.ref(true);
       const { validMsg, validateDateValue } = useValidate();
+      const curTimezoneInfo = __WEBPACK_EXTERNAL_MODULE_vue__.ref(timezoneInfo.value || dayjs.tz.guess());
       __WEBPACK_EXTERNAL_MODULE_vue__.watch(
         () => props2.value,
         (date) => {
@@ -25454,6 +25460,26 @@ ${$(r2)}`), n2;
           immediate: true
         }
       );
+      __WEBPACK_EXTERNAL_MODULE_vue__.watch(
+        () => timezoneInfo,
+        (newTimezone) => {
+          if (!timezoneInfo.value) return;
+          if (newTimezone.value.label === curTimezoneInfo.value.label) return;
+          if (newTimezone.value.utc === curTimezoneInfo.value.utc) return;
+          curTimezoneInfo.value = newTimezone.value || dayjs.tz.guess();
+          if (startDate.value) {
+            startDate.value = dayjs.tz(startDate.value, curTimezoneInfo.value.label);
+            startInput.value.value = startDate.value.format(format.value);
+          }
+          if (endDate.value) {
+            endDate.value = dayjs.tz(endDate.value, curTimezoneInfo.value.label);
+            endInput.value.value = endDate.value.format(format.value);
+          }
+        },
+        {
+          deep: true
+        }
+      );
       const canConfirm = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => {
         if (!startDate.value || !endDate.value) return false;
         if (!startDate.value.isValid() || !endDate.value.isValid()) return false;
@@ -25463,33 +25489,31 @@ ${$(r2)}`), n2;
         return true;
       });
       const handleInputEnter = async (_2, type) => {
-        setTimeout(() => {
-          var _a, _b, _c;
-          const target = type === "start" ? startInput.value : endInput.value;
-          const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
-          const editDate = type === "start" ? startDate.value : endDate.value;
-          const curNow = type === "start" ? isStartNow : isEndNow;
-          const otherNow = type === "start" ? isEndNow : isStartNow;
-          const formatValue = editDate == null ? void 0 : editDate.format(format.value);
-          if (val === formatValue) return;
-          if (!val || val === NowConstant && curNow.value) return;
-          if (val === NowConstant && !curNow.value && !otherNow.value) {
-            handleIsNowChange(type);
-            return;
-          }
-          let date = inputVal2Dayjs(val, format.value, editDate);
-          if (date.isValid()) {
-            if (!(editDate == null ? void 0 : editDate.isSame(date))) {
-              curNow.value = val === NowConstant;
-              if (type === "start") {
-                handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
-              } else {
-                handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
-              }
+        var _a, _b, _c;
+        const target = type === "start" ? startInput.value : endInput.value;
+        const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
+        const editDate = type === "start" ? startDate.value : endDate.value;
+        const curNow = type === "start" ? isStartNow : isEndNow;
+        const otherNow = type === "start" ? isEndNow : isStartNow;
+        const formatValue = editDate == null ? void 0 : editDate.format(format.value);
+        if (val === formatValue) return;
+        if (!val || val === NowConstant && curNow.value) return;
+        if (val === NowConstant && !curNow.value && !otherNow.value) {
+          handleIsNowChange(type);
+          return;
+        }
+        let date = inputVal2Dayjs(val, format.value, editDate);
+        if (date.isValid()) {
+          if (!(editDate == null ? void 0 : editDate.isSame(date))) {
+            curNow.value = val === NowConstant;
+            if (type === "start") {
+              handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
+            } else {
+              handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
             }
           }
-          target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
-        }, 16);
+        }
+        target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
       };
       const handleFocusStart = () => {
         showStartPanel.value = true;
@@ -25572,8 +25596,8 @@ ${$(r2)}`), n2;
       };
       const handleSubmit = () => {
         if (startDate.value && endDate.value) {
-          const startValue = isStartNow.value ? NowConstant : startDate.value.tz(timezoneInfo.value.label, true).valueOf();
-          const endValue = isEndNow.value ? NowConstant : endDate.value.tz(timezoneInfo.value.label, true).valueOf();
+          const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value), timezoneInfo.value.label).valueOf();
+          const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value), timezoneInfo.value.label).valueOf();
           isValidate.value = validateDateValue([startValue || "", endValue || ""]);
           if (!isValidate.value) return;
           emits("change", [startValue || "", endValue || ""]);
@@ -25607,10 +25631,11 @@ ${$(r2)}`), n2;
               },
               [
                 _hoisted_3$4,
-                __WEBPACK_EXTERNAL_MODULE_vue__.createVNode(__WEBPACK_EXTERNAL_MODULE_vue__.unref(__webpack_exports__default$9), {
+                (__WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createBlock(__WEBPACK_EXTERNAL_MODULE_vue__.unref(__webpack_exports__default$9), {
                   "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-start__",
                   arrow: false,
                   "is-show": showStartPanel.value,
+                  key: __WEBPACK_EXTERNAL_MODULE_vue__.unref(timezoneInfo).label,
                   boundary: "parent",
                   placement: "bottom-start",
                   theme: "light",
@@ -25648,12 +25673,13 @@ ${$(r2)}`), n2;
                   }),
                   _: 1
                   /* STABLE */
-                }, 8, ["is-show"]),
+                }, 8, ["is-show"])),
                 _hoisted_5$3,
-                __WEBPACK_EXTERNAL_MODULE_vue__.createVNode(__WEBPACK_EXTERNAL_MODULE_vue__.unref(__webpack_exports__default$9), {
+                (__WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createBlock(__WEBPACK_EXTERNAL_MODULE_vue__.unref(__webpack_exports__default$9), {
                   "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-end__",
                   arrow: false,
                   "is-show": showEndPanel.value,
+                  key: __WEBPACK_EXTERNAL_MODULE_vue__.unref(timezoneInfo).label,
                   boundary: "parent",
                   placement: "bottom-start",
                   theme: "light",
@@ -25690,7 +25716,7 @@ ${$(r2)}`), n2;
                   }),
                   _: 1
                   /* STABLE */
-                }, 8, ["is-show"]),
+                }, 8, ["is-show"])),
                 !!(startDate.value || endDate.value) ? (__WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createBlock(__WEBPACK_EXTERNAL_MODULE_vue__.unref(__webpack_exports__default$m), {
                   key: 0,
                   class: "date-picker-clear",
@@ -26983,7 +27009,7 @@ ${$(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 dateDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(new DateRange(props2.modelValue, props2.format));
       const tooltipsDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef();
       const storeKey2 = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => getStoreKey(props2.version));
       const datePanelShow = __WEBPACK_EXTERNAL_MODULE_vue__.ref(false);
@@ -26994,7 +27020,7 @@ ${$(r2)}`), n2;
           var _a, _b;
           if (((_b = (_a = dateDetail.value) == null ? void 0 : _a.dateValue) == null ? void 0 : _b.length) && dateDetail.value.dateValue.every((item, index) => item === (v2 == null ? void 0 : v2[index])))
             return;
-          dateDetail.value = new DateRange(v2, format.value, props2.timezone);
+          dateDetail.value = new DateRange(v2, format.value);
         },
         {
           immediate: true
@@ -27023,7 +27049,7 @@ ${$(r2)}`), n2;
         if (enterTimer) return;
         enterTimer = setTimeout(() => {
           tooltipsShow.value = true;
-          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, props2.timezone);
+          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value);
           enterTimer = null;
         }, 100);
       }
@@ -27046,7 +27072,6 @@ ${$(r2)}`), n2;
         !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
-        dateDetail.value = new DateRange(props2.modelValue, format.value, val);
         emits("update:timezone", val, { ...info });
         sessionStorage.setItem(timezoneStoreKey, val);
       };
@@ -27060,8 +27085,8 @@ ${$(r2)}`), n2;
         const durations = dateDetail.value.dateDuration();
         const val = type === "left" ? [startDate.subtract(durations), endDate.subtract(durations)] : [startDate.add(durations), endDate.add(durations)];
         if ((_b = props2.validDateRange) == null ? void 0 : _b.length) {
-          const validDateRange = new DateRange(props2.validDateRange, props2.format, props2.timezone);
-          if (!validDateRange.isInValidDateRange(new DateRange(val, props2.format, props2.timezone))) return;
+          const validDateRange = new DateRange(props2.validDateRange, props2.format);
+          if (!validDateRange.isInValidDateRange(new DateRange(val, props2.format))) return;
         }
         handleChange(val);
       };
@@ -27333,6 +27358,7 @@ ${$(r2)}`), n2;
   exports2.futureDateRegexp = futureDateRegexp;
   exports2.getStoreKey = getStoreKey;
   exports2.getStoreTabKey = getStoreTabKey;
+  exports2.getTimezoneOffset = getTimezoneOffset;
   exports2.inputVal2Dayjs = inputVal2Dayjs;
   exports2.naturalDateRegexp = naturalDateRegexp;
   exports2.naturalDateShortcutMap = naturalDateShortcutMap;

package/vue3/index.es.min.js CHANGED Viewed

@@ -653,6 +653,11 @@ const inputVal2Dayjs = (val, format, defaultDate) => {
   }
   return date;
 };
+function getTimezoneOffset(timezone) {
+  const localTime = dayjs().tz(timezone);
+  const offset = localTime.utcOffset() / 60;
+  return offset;
+}
 dayjs.extend(utc);
 dayjs.extend(tz);
 const timezoneData = [
@@ -2511,6 +2516,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const today = dayjs();
     const isValidate = ref(true);
     const { validMsg, validateDateValue } = useValidate();
+    const curTimezoneInfo = ref(timezoneInfo.value || dayjs.tz.guess());
     watch(
       () => props.value,
       (date) => {
@@ -2524,6 +2530,26 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
+    watch(
+      () => timezoneInfo,
+      (newTimezone) => {
+        if (!timezoneInfo.value) return;
+        if (newTimezone.value.label === curTimezoneInfo.value.label) return;
+        if (newTimezone.value.utc === curTimezoneInfo.value.utc) return;
+        curTimezoneInfo.value = newTimezone.value || dayjs.tz.guess();
+        if (startDate.value) {
+          startDate.value = dayjs.tz(startDate.value, curTimezoneInfo.value.label);
+          startInput.value.value = startDate.value.format(format.value);
+        }
+        if (endDate.value) {
+          endDate.value = dayjs.tz(endDate.value, curTimezoneInfo.value.label);
+          endInput.value.value = endDate.value.format(format.value);
+        }
+      },
+      {
+        deep: true
+      }
+    );
     const canConfirm = computed(() => {
       if (!startDate.value || !endDate.value) return false;
       if (!startDate.value.isValid() || !endDate.value.isValid()) return false;
@@ -2533,33 +2559,31 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       return true;
     });
     const handleInputEnter = async (_, type) => {
-      setTimeout(() => {
-        var _a, _b, _c;
-        const target = type === "start" ? startInput.value : endInput.value;
-        const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
-        const editDate = type === "start" ? startDate.value : endDate.value;
-        const curNow = type === "start" ? isStartNow : isEndNow;
-        const otherNow = type === "start" ? isEndNow : isStartNow;
-        const formatValue = editDate == null ? void 0 : editDate.format(format.value);
-        if (val === formatValue) return;
-        if (!val || val === NowConstant && curNow.value) return;
-        if (val === NowConstant && !curNow.value && !otherNow.value) {
-          handleIsNowChange(type);
-          return;
-        }
-        let date = inputVal2Dayjs(val, format.value, editDate);
-        if (date.isValid()) {
-          if (!(editDate == null ? void 0 : editDate.isSame(date))) {
-            curNow.value = val === NowConstant;
-            if (type === "start") {
-              handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
-            } else {
-              handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
-            }
+      var _a, _b, _c;
+      const target = type === "start" ? startInput.value : endInput.value;
+      const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
+      const editDate = type === "start" ? startDate.value : endDate.value;
+      const curNow = type === "start" ? isStartNow : isEndNow;
+      const otherNow = type === "start" ? isEndNow : isStartNow;
+      const formatValue = editDate == null ? void 0 : editDate.format(format.value);
+      if (val === formatValue) return;
+      if (!val || val === NowConstant && curNow.value) return;
+      if (val === NowConstant && !curNow.value && !otherNow.value) {
+        handleIsNowChange(type);
+        return;
+      }
+      let date = inputVal2Dayjs(val, format.value, editDate);
+      if (date.isValid()) {
+        if (!(editDate == null ? void 0 : editDate.isSame(date))) {
+          curNow.value = val === NowConstant;
+          if (type === "start") {
+            handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
+          } else {
+            handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
           }
         }
-        target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
-      }, 16);
+      }
+      target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
     };
     const handleFocusStart = () => {
       showStartPanel.value = true;
@@ -2642,8 +2666,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
     const handleSubmit = () => {
       if (startDate.value && endDate.value) {
-        const startValue = isStartNow.value ? NowConstant : startDate.value.tz(timezoneInfo.value.label, true).valueOf();
-        const endValue = isEndNow.value ? NowConstant : endDate.value.tz(timezoneInfo.value.label, true).valueOf();
+        const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value), timezoneInfo.value.label).valueOf();
+        const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value), timezoneInfo.value.label).valueOf();
         isValidate.value = validateDateValue([startValue || "", endValue || ""]);
         if (!isValidate.value) return;
         emits("change", [startValue || "", endValue || ""]);
@@ -2677,10 +2701,11 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             },
             [
               _hoisted_3$4,
-              createVNode(unref(Popover), {
+              (openBlock(), createBlock(unref(Popover), {
                 "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-start__",
                 arrow: false,
                 "is-show": showStartPanel.value,
+                key: unref(timezoneInfo).label,
                 boundary: "parent",
                 placement: "bottom-start",
                 theme: "light",
@@ -2718,12 +2743,13 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 }),
                 _: 1
                 /* STABLE */
-              }, 8, ["is-show"]),
+              }, 8, ["is-show"])),
               _hoisted_5$3,
-              createVNode(unref(Popover), {
+              (openBlock(), createBlock(unref(Popover), {
                 "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-end__",
                 arrow: false,
                 "is-show": showEndPanel.value,
+                key: unref(timezoneInfo).label,
                 boundary: "parent",
                 placement: "bottom-start",
                 theme: "light",
@@ -2760,7 +2786,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 }),
                 _: 1
                 /* STABLE */
-              }, 8, ["is-show"]),
+              }, 8, ["is-show"])),
               !!(startDate.value || endDate.value) ? (openBlock(), createBlock(unref(Close), {
                 key: 0,
                 class: "date-picker-clear",
@@ -4053,7 +4079,7 @@ 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 dateDetail = shallowRef(new DateRange(props.modelValue, props.format));
     const tooltipsDetail = shallowRef();
     const storeKey2 = computed(() => getStoreKey(props.version));
     const datePanelShow = ref(false);
@@ -4064,7 +4090,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         var _a, _b;
         if (((_b = (_a = dateDetail.value) == null ? void 0 : _a.dateValue) == null ? void 0 : _b.length) && dateDetail.value.dateValue.every((item, index) => item === (v == null ? void 0 : v[index])))
           return;
-        dateDetail.value = new DateRange(v, format.value, props.timezone);
+        dateDetail.value = new DateRange(v, format.value);
       },
       {
         immediate: true
@@ -4093,7 +4119,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (enterTimer) return;
       enterTimer = setTimeout(() => {
         tooltipsShow.value = true;
-        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, props.timezone);
+        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value);
         enterTimer = null;
       }, 100);
     }
@@ -4116,7 +4142,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
     };
     const handleTimezoneChange = (val, info) => {
-      dateDetail.value = new DateRange(props.modelValue, format.value, val);
       emits("update:timezone", val, { ...info });
       sessionStorage.setItem(timezoneStoreKey, val);
     };
@@ -4130,8 +4155,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const durations = dateDetail.value.dateDuration();
       const val = type === "left" ? [startDate.subtract(durations), endDate.subtract(durations)] : [startDate.add(durations), endDate.add(durations)];
       if ((_b = props.validDateRange) == null ? void 0 : _b.length) {
-        const validDateRange = new DateRange(props.validDateRange, props.format, props.timezone);
-        if (!validDateRange.isInValidDateRange(new DateRange(val, props.format, props.timezone))) return;
+        const validDateRange = new DateRange(props.validDateRange, props.format);
+        if (!validDateRange.isInValidDateRange(new DateRange(val, props.format))) return;
       }
       handleChange(val);
     };
@@ -4338,6 +4363,7 @@ export {
   futureDateRegexp,
   getStoreKey,
   getStoreTabKey,
+  getTimezoneOffset,
   inputVal2Dayjs,
   naturalDateRegexp,
   naturalDateShortcutMap,

package/vue3/index.iife.min.js CHANGED Viewed

@@ -24189,6 +24189,11 @@ ${$(r2)}`), n2;
     }
     return date;
   };
+  function getTimezoneOffset(timezone2) {
+    const localTime = dayjs().tz(timezone2);
+    const offset2 = localTime.utcOffset() / 60;
+    return offset2;
+  }
   dayjs.extend(utc);
   dayjs.extend(tz);
   const timezoneData = [
@@ -26047,6 +26052,7 @@ ${$(r2)}`), n2;
       const today = dayjs();
       const isValidate = __WEBPACK_EXTERNAL_MODULE_vue__.ref(true);
       const { validMsg, validateDateValue } = useValidate();
+      const curTimezoneInfo = __WEBPACK_EXTERNAL_MODULE_vue__.ref(timezoneInfo.value || dayjs.tz.guess());
       __WEBPACK_EXTERNAL_MODULE_vue__.watch(
         () => props2.value,
         (date) => {
@@ -26060,6 +26066,26 @@ ${$(r2)}`), n2;
           immediate: true
         }
       );
+      __WEBPACK_EXTERNAL_MODULE_vue__.watch(
+        () => timezoneInfo,
+        (newTimezone) => {
+          if (!timezoneInfo.value) return;
+          if (newTimezone.value.label === curTimezoneInfo.value.label) return;
+          if (newTimezone.value.utc === curTimezoneInfo.value.utc) return;
+          curTimezoneInfo.value = newTimezone.value || dayjs.tz.guess();
+          if (startDate.value) {
+            startDate.value = dayjs.tz(startDate.value, curTimezoneInfo.value.label);
+            startInput.value.value = startDate.value.format(format.value);
+          }
+          if (endDate.value) {
+            endDate.value = dayjs.tz(endDate.value, curTimezoneInfo.value.label);
+            endInput.value.value = endDate.value.format(format.value);
+          }
+        },
+        {
+          deep: true
+        }
+      );
       const canConfirm = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => {
         if (!startDate.value || !endDate.value) return false;
         if (!startDate.value.isValid() || !endDate.value.isValid()) return false;
@@ -26069,33 +26095,31 @@ ${$(r2)}`), n2;
         return true;
       });
       const handleInputEnter = async (_2, type) => {
-        setTimeout(() => {
-          var _a, _b, _c;
-          const target = type === "start" ? startInput.value : endInput.value;
-          const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
-          const editDate = type === "start" ? startDate.value : endDate.value;
-          const curNow = type === "start" ? isStartNow : isEndNow;
-          const otherNow = type === "start" ? isEndNow : isStartNow;
-          const formatValue = editDate == null ? void 0 : editDate.format(format.value);
-          if (val === formatValue) return;
-          if (!val || val === NowConstant && curNow.value) return;
-          if (val === NowConstant && !curNow.value && !otherNow.value) {
-            handleIsNowChange(type);
-            return;
-          }
-          let date = inputVal2Dayjs(val, format.value, editDate);
-          if (date.isValid()) {
-            if (!(editDate == null ? void 0 : editDate.isSame(date))) {
-              curNow.value = val === NowConstant;
-              if (type === "start") {
-                handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
-              } else {
-                handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
-              }
+        var _a, _b, _c;
+        const target = type === "start" ? startInput.value : endInput.value;
+        const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
+        const editDate = type === "start" ? startDate.value : endDate.value;
+        const curNow = type === "start" ? isStartNow : isEndNow;
+        const otherNow = type === "start" ? isEndNow : isStartNow;
+        const formatValue = editDate == null ? void 0 : editDate.format(format.value);
+        if (val === formatValue) return;
+        if (!val || val === NowConstant && curNow.value) return;
+        if (val === NowConstant && !curNow.value && !otherNow.value) {
+          handleIsNowChange(type);
+          return;
+        }
+        let date = inputVal2Dayjs(val, format.value, editDate);
+        if (date.isValid()) {
+          if (!(editDate == null ? void 0 : editDate.isSame(date))) {
+            curNow.value = val === NowConstant;
+            if (type === "start") {
+              handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
+            } else {
+              handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
             }
           }
-          target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
-        }, 16);
+        }
+        target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
       };
       const handleFocusStart = () => {
         showStartPanel.value = true;
@@ -26178,8 +26202,8 @@ ${$(r2)}`), n2;
       };
       const handleSubmit = () => {
         if (startDate.value && endDate.value) {
-          const startValue = isStartNow.value ? NowConstant : startDate.value.tz(timezoneInfo.value.label, true).valueOf();
-          const endValue = isEndNow.value ? NowConstant : endDate.value.tz(timezoneInfo.value.label, true).valueOf();
+          const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value), timezoneInfo.value.label).valueOf();
+          const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value), timezoneInfo.value.label).valueOf();
           isValidate.value = validateDateValue([startValue || "", endValue || ""]);
           if (!isValidate.value) return;
           emits("change", [startValue || "", endValue || ""]);
@@ -26213,10 +26237,11 @@ ${$(r2)}`), n2;
               },
               [
                 _hoisted_3$4,
-                __WEBPACK_EXTERNAL_MODULE_vue__.createVNode(__WEBPACK_EXTERNAL_MODULE_vue__.unref(__webpack_exports__default$9), {
+                (__WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createBlock(__WEBPACK_EXTERNAL_MODULE_vue__.unref(__webpack_exports__default$9), {
                   "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-start__",
                   arrow: false,
                   "is-show": showStartPanel.value,
+                  key: __WEBPACK_EXTERNAL_MODULE_vue__.unref(timezoneInfo).label,
                   boundary: "parent",
                   placement: "bottom-start",
                   theme: "light",
@@ -26254,12 +26279,13 @@ ${$(r2)}`), n2;
                   }),
                   _: 1
                   /* STABLE */
-                }, 8, ["is-show"]),
+                }, 8, ["is-show"])),
                 _hoisted_5$3,
-                __WEBPACK_EXTERNAL_MODULE_vue__.createVNode(__WEBPACK_EXTERNAL_MODULE_vue__.unref(__webpack_exports__default$9), {
+                (__WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createBlock(__WEBPACK_EXTERNAL_MODULE_vue__.unref(__webpack_exports__default$9), {
                   "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-end__",
                   arrow: false,
                   "is-show": showEndPanel.value,
+                  key: __WEBPACK_EXTERNAL_MODULE_vue__.unref(timezoneInfo).label,
                   boundary: "parent",
                   placement: "bottom-start",
                   theme: "light",
@@ -26296,7 +26322,7 @@ ${$(r2)}`), n2;
                   }),
                   _: 1
                   /* STABLE */
-                }, 8, ["is-show"]),
+                }, 8, ["is-show"])),
                 !!(startDate.value || endDate.value) ? (__WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createBlock(__WEBPACK_EXTERNAL_MODULE_vue__.unref(__webpack_exports__default$m), {
                   key: 0,
                   class: "date-picker-clear",
@@ -27589,7 +27615,7 @@ ${$(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 dateDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(new DateRange(props2.modelValue, props2.format));
       const tooltipsDetail = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef();
       const storeKey2 = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => getStoreKey(props2.version));
       const datePanelShow = __WEBPACK_EXTERNAL_MODULE_vue__.ref(false);
@@ -27600,7 +27626,7 @@ ${$(r2)}`), n2;
           var _a, _b;
           if (((_b = (_a = dateDetail.value) == null ? void 0 : _a.dateValue) == null ? void 0 : _b.length) && dateDetail.value.dateValue.every((item, index) => item === (v2 == null ? void 0 : v2[index])))
             return;
-          dateDetail.value = new DateRange(v2, format.value, props2.timezone);
+          dateDetail.value = new DateRange(v2, format.value);
         },
         {
           immediate: true
@@ -27629,7 +27655,7 @@ ${$(r2)}`), n2;
         if (enterTimer) return;
         enterTimer = setTimeout(() => {
           tooltipsShow.value = true;
-          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, props2.timezone);
+          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value);
           enterTimer = null;
         }, 100);
       }
@@ -27652,7 +27678,6 @@ ${$(r2)}`), n2;
         !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
-        dateDetail.value = new DateRange(props2.modelValue, format.value, val);
         emits("update:timezone", val, { ...info });
         sessionStorage.setItem(timezoneStoreKey, val);
       };
@@ -27666,8 +27691,8 @@ ${$(r2)}`), n2;
         const durations = dateDetail.value.dateDuration();
         const val = type === "left" ? [startDate.subtract(durations), endDate.subtract(durations)] : [startDate.add(durations), endDate.add(durations)];
         if ((_b = props2.validDateRange) == null ? void 0 : _b.length) {
-          const validDateRange = new DateRange(props2.validDateRange, props2.format, props2.timezone);
-          if (!validDateRange.isInValidDateRange(new DateRange(val, props2.format, props2.timezone))) return;
+          const validDateRange = new DateRange(props2.validDateRange, props2.format);
+          if (!validDateRange.isInValidDateRange(new DateRange(val, props2.format))) return;
         }
         handleChange(val);
       };
@@ -27873,6 +27898,7 @@ ${$(r2)}`), n2;
   exports.futureDateRegexp = futureDateRegexp;
   exports.getStoreKey = getStoreKey;
   exports.getStoreTabKey = getStoreTabKey;
+  exports.getTimezoneOffset = getTimezoneOffset;
   exports.inputVal2Dayjs = inputVal2Dayjs;
   exports.naturalDateRegexp = naturalDateRegexp;
   exports.naturalDateShortcutMap = naturalDateShortcutMap;

package/vue3/index.umd.min.js CHANGED Viewed

@@ -649,6 +649,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return date;
   };
+  function getTimezoneOffset(timezone) {
+    const localTime = dayjs().tz(timezone);
+    const offset = localTime.utcOffset() / 60;
+    return offset;
+  }
   dayjs.extend(utc);
   dayjs.extend(tz);
   const timezoneData = [
@@ -2507,6 +2512,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const today = dayjs();
       const isValidate = vue.ref(true);
       const { validMsg, validateDateValue } = useValidate();
+      const curTimezoneInfo = vue.ref(timezoneInfo.value || dayjs.tz.guess());
       vue.watch(
         () => props.value,
         (date) => {
@@ -2520,6 +2526,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           immediate: true
         }
       );
+      vue.watch(
+        () => timezoneInfo,
+        (newTimezone) => {
+          if (!timezoneInfo.value) return;
+          if (newTimezone.value.label === curTimezoneInfo.value.label) return;
+          if (newTimezone.value.utc === curTimezoneInfo.value.utc) return;
+          curTimezoneInfo.value = newTimezone.value || dayjs.tz.guess();
+          if (startDate.value) {
+            startDate.value = dayjs.tz(startDate.value, curTimezoneInfo.value.label);
+            startInput.value.value = startDate.value.format(format.value);
+          }
+          if (endDate.value) {
+            endDate.value = dayjs.tz(endDate.value, curTimezoneInfo.value.label);
+            endInput.value.value = endDate.value.format(format.value);
+          }
+        },
+        {
+          deep: true
+        }
+      );
       const canConfirm = vue.computed(() => {
         if (!startDate.value || !endDate.value) return false;
         if (!startDate.value.isValid() || !endDate.value.isValid()) return false;
@@ -2529,33 +2555,31 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return true;
       });
       const handleInputEnter = async (_, type) => {
-        setTimeout(() => {
-          var _a, _b, _c;
-          const target = type === "start" ? startInput.value : endInput.value;
-          const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
-          const editDate = type === "start" ? startDate.value : endDate.value;
-          const curNow = type === "start" ? isStartNow : isEndNow;
-          const otherNow = type === "start" ? isEndNow : isStartNow;
-          const formatValue = editDate == null ? void 0 : editDate.format(format.value);
-          if (val === formatValue) return;
-          if (!val || val === NowConstant && curNow.value) return;
-          if (val === NowConstant && !curNow.value && !otherNow.value) {
-            handleIsNowChange(type);
-            return;
-          }
-          let date = inputVal2Dayjs(val, format.value, editDate);
-          if (date.isValid()) {
-            if (!(editDate == null ? void 0 : editDate.isSame(date))) {
-              curNow.value = val === NowConstant;
-              if (type === "start") {
-                handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
-              } else {
-                handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
-              }
+        var _a, _b, _c;
+        const target = type === "start" ? startInput.value : endInput.value;
+        const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
+        const editDate = type === "start" ? startDate.value : endDate.value;
+        const curNow = type === "start" ? isStartNow : isEndNow;
+        const otherNow = type === "start" ? isEndNow : isStartNow;
+        const formatValue = editDate == null ? void 0 : editDate.format(format.value);
+        if (val === formatValue) return;
+        if (!val || val === NowConstant && curNow.value) return;
+        if (val === NowConstant && !curNow.value && !otherNow.value) {
+          handleIsNowChange(type);
+          return;
+        }
+        let date = inputVal2Dayjs(val, format.value, editDate);
+        if (date.isValid()) {
+          if (!(editDate == null ? void 0 : editDate.isSame(date))) {
+            curNow.value = val === NowConstant;
+            if (type === "start") {
+              handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
+            } else {
+              handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
             }
           }
-          target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
-        }, 16);
+        }
+        target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
       };
       const handleFocusStart = () => {
         showStartPanel.value = true;
@@ -2638,8 +2662,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
       const handleSubmit = () => {
         if (startDate.value && endDate.value) {
-          const startValue = isStartNow.value ? NowConstant : startDate.value.tz(timezoneInfo.value.label, true).valueOf();
-          const endValue = isEndNow.value ? NowConstant : endDate.value.tz(timezoneInfo.value.label, true).valueOf();
+          const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value), timezoneInfo.value.label).valueOf();
+          const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value), timezoneInfo.value.label).valueOf();
           isValidate.value = validateDateValue([startValue || "", endValue || ""]);
           if (!isValidate.value) return;
           emits("change", [startValue || "", endValue || ""]);
@@ -2673,10 +2697,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               },
               [
                 _hoisted_3$4,
-                vue.createVNode(vue.unref(bkuiVue.Popover), {
+                (vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Popover), {
                   "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-start__",
                   arrow: false,
                   "is-show": showStartPanel.value,
+                  key: vue.unref(timezoneInfo).label,
                   boundary: "parent",
                   placement: "bottom-start",
                   theme: "light",
@@ -2714,12 +2739,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   }),
                   _: 1
                   /* STABLE */
-                }, 8, ["is-show"]),
+                }, 8, ["is-show"])),
                 _hoisted_5$3,
-                vue.createVNode(vue.unref(bkuiVue.Popover), {
+                (vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Popover), {
                   "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-end__",
                   arrow: false,
                   "is-show": showEndPanel.value,
+                  key: vue.unref(timezoneInfo).label,
                   boundary: "parent",
                   placement: "bottom-start",
                   theme: "light",
@@ -2756,7 +2782,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   }),
                   _: 1
                   /* STABLE */
-                }, 8, ["is-show"]),
+                }, 8, ["is-show"])),
                 !!(startDate.value || endDate.value) ? (vue.openBlock(), vue.createBlock(vue.unref(icon.Close), {
                   key: 0,
                   class: "date-picker-clear",
@@ -4049,7 +4075,7 @@ 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 dateDetail = vue.shallowRef(new DateRange(props.modelValue, props.format));
       const tooltipsDetail = vue.shallowRef();
       const storeKey2 = vue.computed(() => getStoreKey(props.version));
       const datePanelShow = vue.ref(false);
@@ -4060,7 +4086,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           var _a, _b;
           if (((_b = (_a = dateDetail.value) == null ? void 0 : _a.dateValue) == null ? void 0 : _b.length) && dateDetail.value.dateValue.every((item, index) => item === (v == null ? void 0 : v[index])))
             return;
-          dateDetail.value = new DateRange(v, format.value, props.timezone);
+          dateDetail.value = new DateRange(v, format.value);
         },
         {
           immediate: true
@@ -4089,7 +4115,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (enterTimer) return;
         enterTimer = setTimeout(() => {
           tooltipsShow.value = true;
-          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, props.timezone);
+          tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value);
           enterTimer = null;
         }, 100);
       }
@@ -4112,7 +4138,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
       };
       const handleTimezoneChange = (val, info) => {
-        dateDetail.value = new DateRange(props.modelValue, format.value, val);
         emits("update:timezone", val, { ...info });
         sessionStorage.setItem(timezoneStoreKey, val);
       };
@@ -4126,8 +4151,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const durations = dateDetail.value.dateDuration();
         const val = type === "left" ? [startDate.subtract(durations), endDate.subtract(durations)] : [startDate.add(durations), endDate.add(durations)];
         if ((_b = props.validDateRange) == null ? void 0 : _b.length) {
-          const validDateRange = new DateRange(props.validDateRange, props.format, props.timezone);
-          if (!validDateRange.isInValidDateRange(new DateRange(val, props.format, props.timezone))) return;
+          const validDateRange = new DateRange(props.validDateRange, props.format);
+          if (!validDateRange.isInValidDateRange(new DateRange(val, props.format))) return;
         }
         handleChange(val);
       };
@@ -4333,6 +4358,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   exports2.futureDateRegexp = futureDateRegexp;
   exports2.getStoreKey = getStoreKey;
   exports2.getStoreTabKey = getStoreTabKey;
+  exports2.getTimezoneOffset = getTimezoneOffset;
   exports2.inputVal2Dayjs = inputVal2Dayjs;
   exports2.naturalDateRegexp = naturalDateRegexp;
   exports2.naturalDateShortcutMap = naturalDateShortcutMap;