@blueking/date-picker 2.0.0-beta.44 → 2.0.0-beta.45

package/package.json

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

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

@@ -2,7 +2,9 @@ import { type DateValue } from '../utils';
 import { DateRange } from '../utils/date';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     value: DateRange;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    handleSubmit: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: DateValue) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     value: DateRange;

package/typings/components/natural-picker.vue.d.ts

@@ -4,7 +4,9 @@ interface IProps {
     /** 已选择自然日期 */
     value?: DateRange;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<IProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<IProps>, {
+    handleSubmit: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: NaturalDateValue) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<IProps>>> & {
     onChange?: ((value: NaturalDateValue) => any) | undefined;

package/typings/components/recent-picker.vue.d.ts

@@ -7,7 +7,9 @@ interface IProps {
 }
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<IProps>, {
     type: DateMode;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    handleSubmit: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: RecentDateValue | FutureDateValue) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<IProps>, {
     type: DateMode;

package/vue2/index.es.min.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "@blueking/bkui-library";
-import { provide, inject, ref, customRef, defineComponent, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, createCommentVNode, createTextVNode, toDisplayString, shallowRef, watch, createElementVNode, normalizeClass, withModifiers, computed, onActivated, normalizeStyle, withDirectives, withKeys, onMounted, vShow, nextTick, mergeProps, KeepAlive, resolveDynamicComponent, onBeforeUnmount, createApp, h as h$1 } from "@blueking/bkui-library";
+import { effectScope, getCurrentScope, onScopeDispose, provide, inject, ref, customRef, defineComponent, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, createCommentVNode, createTextVNode, toDisplayString, shallowRef, watch, createElementVNode, normalizeClass, withModifiers, computed, onActivated, normalizeStyle, withDirectives, withKeys, onMounted, vShow, nextTick, mergeProps, KeepAlive, resolveDynamicComponent, onBeforeUnmount, createApp, h as h$1 } from "@blueking/bkui-library";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -35538,6 +35538,25 @@ __webpack_exports__.BkTabPanel;
 __webpack_exports__.PositionEnum;
 __webpack_exports__.SortTypeEnum;
 var __webpack_exports__default = __webpack_exports__["default"];
+function useKeydownEnter(callback) {
+  const scope = effectScope();
+  const handleKeydown = (event) => {
+    if (event.key === "Enter") {
+      callback(event);
+    }
+  };
+  scope.run(() => {
+    window.addEventListener("keydown", handleKeydown);
+  });
+  const stop = () => {
+    scope.stop();
+    window.removeEventListener("keydown", handleKeydown);
+  };
+  if (getCurrentScope()) {
+    onScopeDispose(stop);
+  }
+  return stop;
+}
 const getCookieByName = (name) => {
   const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`));
   if (match) {
@@ -38089,7 +38108,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     value: {}
   },
   emits: ["change"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     dayjs.extend(customParseFormat);
     const props2 = __props;
     const emits = __emit;
@@ -38262,7 +38281,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       hiddenEndPanel();
     };
     const handleSubmit = () => {
-      if (startDate.value && endDate.value) {
+      if (startDate.value && endDate.value && canConfirm.value) {
         const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
         const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
         isValidate.value = validateDateValue([startValue || "", endValue || ""]);
@@ -38284,6 +38303,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         hiddenEndPanel();
       }
     };
+    __expose({
+      handleSubmit
+    });
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
@@ -38492,7 +38514,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     value: {}
   },
   emits: ["change"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const emits = __emit;
     const props2 = __props;
     const inputRef = ref();
@@ -38621,6 +38643,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       });
       emits("change", value);
     };
+    __expose({
+      handleSubmit
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         Fragment,
@@ -39062,7 +39087,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     value: {}
   },
   emits: ["change"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const emits = __emit;
     const props2 = __props;
     const recentUnit = ref("m");
@@ -39085,7 +39110,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     );
     const handleSubmit = () => {
-      if (!dateValue.value) return;
+      if (!dateValue.value || !canSubmit.value) return;
       const emitDate = props2.type === DateMode.FUTURE ? [NowConstant, `${DateMode.FUTURE}${dateValue.value}${recentUnit.value}`] : [`${DateMode.RECENT}${dateValue.value}${recentUnit.value}`, NowConstant].map(
         (v2) => recentBaselineTime.value && recentBaselineTime.value !== NowConstant ? v2.replace(NowConstant, `(${recentBaselineTime.value})`) : v2
       );
@@ -39097,6 +39122,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
       emits("change", emitDate);
     };
+    __expose({
+      handleSubmit
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         Fragment,
@@ -39398,6 +39426,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const { validMsg, validateDateRange } = useValidate();
     const timezoneSet = ref(false);
     const activePanel = ref("common");
+    const component = ref();
     const defaultTabKey = computed(() => {
       const tab2 = localStorage.getItem(getStoreTabKey(version.value));
       if (!tab2) return DateMode.Date;
@@ -39419,6 +39448,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return new DateRange(date, format.value, props2.timezone);
       })
     );
+    useKeydownEnter(() => {
+      var _a;
+      (_a = component.value) == null ? void 0 : _a.handleSubmit();
+    });
     const handleChange = (date) => {
       emits("change", date);
     };
@@ -39525,6 +39558,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           null,
           [
             (openBlock(), createBlock(resolveDynamicComponent(getComponent()), {
+              ref_key: "component",
+              ref: component,
               key: activeDatePickTab.value,
               type: activeDatePickTab.value,
               value: _ctx.defaultDate,

package/vue2/index.iife.min.js

@@ -275,6 +275,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
   }
+  function effectScope(detached) {
+    return new EffectScope(detached);
+  }
   function recordEffectScope(effect2, scope = activeEffectScope) {
     if (scope && scope.active) {
       scope.effects.push(effect2);
@@ -283,6 +286,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   function getCurrentScope() {
     return activeEffectScope;
   }
+  function onScopeDispose(fn) {
+    if (activeEffectScope) {
+      activeEffectScope.cleanups.push(fn);
+    }
+  }
   let activeEffect;
   class ReactiveEffect {
     constructor(fn, trigger2, scheduler, scope) {
@@ -42559,6 +42567,25 @@ ${$(r2)}`), n2;
   })(zhCn);
   var zhCnExports = zhCn.exports;
   const cn = /* @__PURE__ */ getDefaultExportFromCjs(zhCnExports);
+  function useKeydownEnter(callback) {
+    const scope = effectScope();
+    const handleKeydown = (event) => {
+      if (event.key === "Enter") {
+        callback(event);
+      }
+    };
+    scope.run(() => {
+      window.addEventListener("keydown", handleKeydown);
+    });
+    const stop = () => {
+      scope.stop();
+      window.removeEventListener("keydown", handleKeydown);
+    };
+    if (getCurrentScope()) {
+      onScopeDispose(stop);
+    }
+    return stop;
+  }
   const getCookieByName = (name) => {
     const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`));
     if (match) {
@@ -45110,7 +45137,7 @@ ${$(r2)}`), n2;
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       dayjs.extend(customParseFormat);
       const props2 = __props;
       const emits = __emit;
@@ -45283,7 +45310,7 @@ ${$(r2)}`), n2;
         hiddenEndPanel();
       };
       const handleSubmit = () => {
-        if (startDate.value && endDate.value) {
+        if (startDate.value && endDate.value && canConfirm.value) {
           const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
           const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
           isValidate.value = validateDateValue([startValue || "", endValue || ""]);
@@ -45305,6 +45332,9 @@ ${$(r2)}`), n2;
           hiddenEndPanel();
         }
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         var _a;
         return openBlock(), createElementBlock("div", _hoisted_1$6, [
@@ -45513,7 +45543,7 @@ ${$(r2)}`), n2;
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const emits = __emit;
       const props2 = __props;
       const inputRef = ref();
@@ -45642,6 +45672,9 @@ ${$(r2)}`), n2;
         });
         emits("change", value);
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock(
           Fragment,
@@ -46083,7 +46116,7 @@ ${$(r2)}`), n2;
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const emits = __emit;
       const props2 = __props;
       const recentUnit = ref("m");
@@ -46106,7 +46139,7 @@ ${$(r2)}`), n2;
         }
       );
       const handleSubmit = () => {
-        if (!dateValue.value) return;
+        if (!dateValue.value || !canSubmit.value) return;
         const emitDate = props2.type === DateMode.FUTURE ? [NowConstant, `${DateMode.FUTURE}${dateValue.value}${recentUnit.value}`] : [`${DateMode.RECENT}${dateValue.value}${recentUnit.value}`, NowConstant].map(
           (v2) => recentBaselineTime.value && recentBaselineTime.value !== NowConstant ? v2.replace(NowConstant, `(${recentBaselineTime.value})`) : v2
         );
@@ -46118,6 +46151,9 @@ ${$(r2)}`), n2;
         }
         emits("change", emitDate);
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock(
           Fragment,
@@ -46419,6 +46455,7 @@ ${$(r2)}`), n2;
       const { validMsg, validateDateRange } = useValidate();
       const timezoneSet = ref(false);
       const activePanel = ref("common");
+      const component = ref();
       const defaultTabKey = computed(() => {
         const tab2 = localStorage.getItem(getStoreTabKey(version2.value));
         if (!tab2) return DateMode.Date;
@@ -46440,6 +46477,10 @@ ${$(r2)}`), n2;
           return new DateRange(date, format.value, props2.timezone);
         })
       );
+      useKeydownEnter(() => {
+        var _a;
+        (_a = component.value) == null ? void 0 : _a.handleSubmit();
+      });
       const handleChange = (date) => {
         emits("change", date);
       };
@@ -46546,6 +46587,8 @@ ${$(r2)}`), n2;
             null,
             [
               (openBlock(), createBlock(resolveDynamicComponent(getComponent()), {
+                ref_key: "component",
+                ref: component,
                 key: activeDatePickTab.value,
                 type: activeDatePickTab.value,
                 value: _ctx.defaultDate,

package/vue2/index.umd.min.js

@@ -35553,6 +35553,25 @@ ${$(r2)}`), n2;
   __webpack_exports__.PositionEnum;
   __webpack_exports__.SortTypeEnum;
   var __webpack_exports__default = __webpack_exports__["default"];
+  function useKeydownEnter(callback) {
+    const scope = __WEBPACK_EXTERNAL_MODULE_vue__.effectScope();
+    const handleKeydown = (event) => {
+      if (event.key === "Enter") {
+        callback(event);
+      }
+    };
+    scope.run(() => {
+      window.addEventListener("keydown", handleKeydown);
+    });
+    const stop = () => {
+      scope.stop();
+      window.removeEventListener("keydown", handleKeydown);
+    };
+    if (__WEBPACK_EXTERNAL_MODULE_vue__.getCurrentScope()) {
+      __WEBPACK_EXTERNAL_MODULE_vue__.onScopeDispose(stop);
+    }
+    return stop;
+  }
   const getCookieByName = (name) => {
     const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`));
     if (match) {
@@ -38104,7 +38123,7 @@ ${$(r2)}`), n2;
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       dayjs.extend(customParseFormat);
       const props2 = __props;
       const emits = __emit;
@@ -38277,7 +38296,7 @@ ${$(r2)}`), n2;
         hiddenEndPanel();
       };
       const handleSubmit = () => {
-        if (startDate.value && endDate.value) {
+        if (startDate.value && endDate.value && canConfirm.value) {
           const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
           const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
           isValidate.value = validateDateValue([startValue || "", endValue || ""]);
@@ -38299,6 +38318,9 @@ ${$(r2)}`), n2;
           hiddenEndPanel();
         }
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         var _a;
         return __WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createElementBlock("div", _hoisted_1$6, [
@@ -38507,7 +38529,7 @@ ${$(r2)}`), n2;
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const emits = __emit;
       const props2 = __props;
       const inputRef = __WEBPACK_EXTERNAL_MODULE_vue__.ref();
@@ -38636,6 +38658,9 @@ ${$(r2)}`), n2;
         });
         emits("change", value);
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         return __WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createElementBlock(
           __WEBPACK_EXTERNAL_MODULE_vue__.Fragment,
@@ -39077,7 +39102,7 @@ ${$(r2)}`), n2;
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const emits = __emit;
       const props2 = __props;
       const recentUnit = __WEBPACK_EXTERNAL_MODULE_vue__.ref("m");
@@ -39100,7 +39125,7 @@ ${$(r2)}`), n2;
         }
       );
       const handleSubmit = () => {
-        if (!dateValue.value) return;
+        if (!dateValue.value || !canSubmit.value) return;
         const emitDate = props2.type === DateMode.FUTURE ? [NowConstant, `${DateMode.FUTURE}${dateValue.value}${recentUnit.value}`] : [`${DateMode.RECENT}${dateValue.value}${recentUnit.value}`, NowConstant].map(
           (v2) => recentBaselineTime.value && recentBaselineTime.value !== NowConstant ? v2.replace(NowConstant, `(${recentBaselineTime.value})`) : v2
         );
@@ -39112,6 +39137,9 @@ ${$(r2)}`), n2;
         }
         emits("change", emitDate);
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         return __WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createElementBlock(
           __WEBPACK_EXTERNAL_MODULE_vue__.Fragment,
@@ -39413,6 +39441,7 @@ ${$(r2)}`), n2;
       const { validMsg, validateDateRange } = useValidate();
       const timezoneSet = __WEBPACK_EXTERNAL_MODULE_vue__.ref(false);
       const activePanel = __WEBPACK_EXTERNAL_MODULE_vue__.ref("common");
+      const component = __WEBPACK_EXTERNAL_MODULE_vue__.ref();
       const defaultTabKey = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => {
         const tab2 = localStorage.getItem(getStoreTabKey(version.value));
         if (!tab2) return DateMode.Date;
@@ -39434,6 +39463,10 @@ ${$(r2)}`), n2;
           return new DateRange(date, format.value, props2.timezone);
         })
       );
+      useKeydownEnter(() => {
+        var _a;
+        (_a = component.value) == null ? void 0 : _a.handleSubmit();
+      });
       const handleChange = (date) => {
         emits("change", date);
       };
@@ -39540,6 +39573,8 @@ ${$(r2)}`), n2;
             null,
             [
               (__WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createBlock(__WEBPACK_EXTERNAL_MODULE_vue__.resolveDynamicComponent(getComponent()), {
+                ref_key: "component",
+                ref: component,
                 key: activeDatePickTab.value,
                 type: activeDatePickTab.value,
                 value: _ctx.defaultDate,

package/vue3/index.es.min.js

@@ -7,11 +7,30 @@ import customParseFormat from "dayjs/plugin/customParseFormat";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import tz from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
-import { provide, inject, ref, customRef, defineComponent, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, createCommentVNode, createTextVNode, toDisplayString, shallowRef, watch, createElementVNode, normalizeClass, withModifiers, computed, onActivated, normalizeStyle, withDirectives, withKeys, onMounted, vShow, nextTick, mergeProps, KeepAlive, resolveDynamicComponent, onBeforeUnmount } from "vue";
+import { effectScope, getCurrentScope, onScopeDispose, provide, inject, ref, customRef, defineComponent, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, createCommentVNode, createTextVNode, toDisplayString, shallowRef, watch, createElementVNode, normalizeClass, withModifiers, computed, onActivated, normalizeStyle, withDirectives, withKeys, onMounted, vShow, nextTick, mergeProps, KeepAlive, resolveDynamicComponent, onBeforeUnmount } from "vue";
 import { Tab, PopConfirm, Popover, Button, Checkbox, clickoutside, Select, Input, Exception, $bkPopover, provideGlobalConfig } from "bkui-vue";
 import { Del, AngleDoubleLeft, AngleLeft, AngleRight, AngleDoubleRight, Close, Transfer } from "bkui-vue/lib/icon";
 import en from "dayjs/locale/en";
 import cn from "dayjs/locale/zh-cn";
+function useKeydownEnter(callback) {
+  const scope = effectScope();
+  const handleKeydown = (event) => {
+    if (event.key === "Enter") {
+      callback(event);
+    }
+  };
+  scope.run(() => {
+    window.addEventListener("keydown", handleKeydown);
+  });
+  const stop = () => {
+    scope.stop();
+    window.removeEventListener("keydown", handleKeydown);
+  };
+  if (getCurrentScope()) {
+    onScopeDispose(stop);
+  }
+  return stop;
+}
 const getCookieByName = (name) => {
   const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`));
   if (match) {
@@ -2563,7 +2582,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     value: {}
   },
   emits: ["change"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     dayjs.extend(customParseFormat);
     const props = __props;
     const emits = __emit;
@@ -2736,7 +2755,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       hiddenEndPanel();
     };
     const handleSubmit = () => {
-      if (startDate.value && endDate.value) {
+      if (startDate.value && endDate.value && canConfirm.value) {
         const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
         const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
         isValidate.value = validateDateValue([startValue || "", endValue || ""]);
@@ -2758,6 +2777,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         hiddenEndPanel();
       }
     };
+    __expose({
+      handleSubmit
+    });
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
@@ -2966,7 +2988,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     value: {}
   },
   emits: ["change"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const emits = __emit;
     const props = __props;
     const inputRef = ref();
@@ -3095,6 +3117,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       });
       emits("change", value);
     };
+    __expose({
+      handleSubmit
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         Fragment,
@@ -3536,7 +3561,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     value: {}
   },
   emits: ["change"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const emits = __emit;
     const props = __props;
     const recentUnit = ref("m");
@@ -3559,7 +3584,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     );
     const handleSubmit = () => {
-      if (!dateValue.value) return;
+      if (!dateValue.value || !canSubmit.value) return;
       const emitDate = props.type === DateMode.FUTURE ? [NowConstant, `${DateMode.FUTURE}${dateValue.value}${recentUnit.value}`] : [`${DateMode.RECENT}${dateValue.value}${recentUnit.value}`, NowConstant].map(
         (v) => recentBaselineTime.value && recentBaselineTime.value !== NowConstant ? v.replace(NowConstant, `(${recentBaselineTime.value})`) : v
       );
@@ -3571,6 +3596,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
       emits("change", emitDate);
     };
+    __expose({
+      handleSubmit
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         Fragment,
@@ -3872,6 +3900,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const { validMsg, validateDateRange } = useValidate();
     const timezoneSet = ref(false);
     const activePanel = ref("common");
+    const component = ref();
     const defaultTabKey = computed(() => {
       const tab = localStorage.getItem(getStoreTabKey(version.value));
       if (!tab) return DateMode.Date;
@@ -3893,6 +3922,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return new DateRange(date, format.value, props.timezone);
       })
     );
+    useKeydownEnter(() => {
+      var _a;
+      (_a = component.value) == null ? void 0 : _a.handleSubmit();
+    });
     const handleChange = (date) => {
       emits("change", date);
     };
@@ -3999,6 +4032,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           null,
           [
             (openBlock(), createBlock(resolveDynamicComponent(getComponent()), {
+              ref_key: "component",
+              ref: component,
               key: activeDatePickTab.value,
               type: activeDatePickTab.value,
               value: _ctx.defaultDate,

package/vue3/index.iife.min.js

@@ -36159,6 +36159,25 @@ ${$(r2)}`), n2;
   })(zhCn);
   var zhCnExports = zhCn.exports;
   const cn = /* @__PURE__ */ getDefaultExportFromCjs(zhCnExports);
+  function useKeydownEnter(callback) {
+    const scope = __WEBPACK_EXTERNAL_MODULE_vue__.effectScope();
+    const handleKeydown = (event) => {
+      if (event.key === "Enter") {
+        callback(event);
+      }
+    };
+    scope.run(() => {
+      window.addEventListener("keydown", handleKeydown);
+    });
+    const stop = () => {
+      scope.stop();
+      window.removeEventListener("keydown", handleKeydown);
+    };
+    if (__WEBPACK_EXTERNAL_MODULE_vue__.getCurrentScope()) {
+      __WEBPACK_EXTERNAL_MODULE_vue__.onScopeDispose(stop);
+    }
+    return stop;
+  }
   const getCookieByName = (name) => {
     const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`));
     if (match) {
@@ -38710,7 +38729,7 @@ ${$(r2)}`), n2;
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       dayjs.extend(customParseFormat);
       const props2 = __props;
       const emits = __emit;
@@ -38883,7 +38902,7 @@ ${$(r2)}`), n2;
         hiddenEndPanel();
       };
       const handleSubmit = () => {
-        if (startDate.value && endDate.value) {
+        if (startDate.value && endDate.value && canConfirm.value) {
           const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
           const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
           isValidate.value = validateDateValue([startValue || "", endValue || ""]);
@@ -38905,6 +38924,9 @@ ${$(r2)}`), n2;
           hiddenEndPanel();
         }
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         var _a;
         return __WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createElementBlock("div", _hoisted_1$6, [
@@ -39113,7 +39135,7 @@ ${$(r2)}`), n2;
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const emits = __emit;
       const props2 = __props;
       const inputRef = __WEBPACK_EXTERNAL_MODULE_vue__.ref();
@@ -39242,6 +39264,9 @@ ${$(r2)}`), n2;
         });
         emits("change", value);
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         return __WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createElementBlock(
           __WEBPACK_EXTERNAL_MODULE_vue__.Fragment,
@@ -39683,7 +39708,7 @@ ${$(r2)}`), n2;
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const emits = __emit;
       const props2 = __props;
       const recentUnit = __WEBPACK_EXTERNAL_MODULE_vue__.ref("m");
@@ -39706,7 +39731,7 @@ ${$(r2)}`), n2;
         }
       );
       const handleSubmit = () => {
-        if (!dateValue.value) return;
+        if (!dateValue.value || !canSubmit.value) return;
         const emitDate = props2.type === DateMode.FUTURE ? [NowConstant, `${DateMode.FUTURE}${dateValue.value}${recentUnit.value}`] : [`${DateMode.RECENT}${dateValue.value}${recentUnit.value}`, NowConstant].map(
           (v2) => recentBaselineTime.value && recentBaselineTime.value !== NowConstant ? v2.replace(NowConstant, `(${recentBaselineTime.value})`) : v2
         );
@@ -39718,6 +39743,9 @@ ${$(r2)}`), n2;
         }
         emits("change", emitDate);
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         return __WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createElementBlock(
           __WEBPACK_EXTERNAL_MODULE_vue__.Fragment,
@@ -40019,6 +40047,7 @@ ${$(r2)}`), n2;
       const { validMsg, validateDateRange } = useValidate();
       const timezoneSet = __WEBPACK_EXTERNAL_MODULE_vue__.ref(false);
       const activePanel = __WEBPACK_EXTERNAL_MODULE_vue__.ref("common");
+      const component = __WEBPACK_EXTERNAL_MODULE_vue__.ref();
       const defaultTabKey = __WEBPACK_EXTERNAL_MODULE_vue__.computed(() => {
         const tab2 = localStorage.getItem(getStoreTabKey(version.value));
         if (!tab2) return DateMode.Date;
@@ -40040,6 +40069,10 @@ ${$(r2)}`), n2;
           return new DateRange(date, format.value, props2.timezone);
         })
       );
+      useKeydownEnter(() => {
+        var _a;
+        (_a = component.value) == null ? void 0 : _a.handleSubmit();
+      });
       const handleChange = (date) => {
         emits("change", date);
       };
@@ -40146,6 +40179,8 @@ ${$(r2)}`), n2;
             null,
             [
               (__WEBPACK_EXTERNAL_MODULE_vue__.openBlock(), __WEBPACK_EXTERNAL_MODULE_vue__.createBlock(__WEBPACK_EXTERNAL_MODULE_vue__.resolveDynamicComponent(getComponent()), {
+                ref_key: "component",
+                ref: component,
                 key: activeDatePickTab.value,
                 type: activeDatePickTab.value,
                 value: _ctx.defaultDate,

package/vue3/index.umd.min.js

@@ -8,6 +8,25 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   var __vite_style__ = document.createElement("style");
   __vite_style__.textContent = '.common-panel-tab {\n  display: flex;\n  align-items: center;\n}\n.common-panel-tab .bk-tab-header {\n  /* stylelint-disable-next-line declaration-no-important */\n  line-height: 20px !important;\n  /* stylelint-disable-next-line declaration-no-important */\n  border-bottom: 0 !important;\n}\n.common-panel-tab .bk-tab-header .bk-tab-header-item {\n  padding: 0;\n  padding-bottom: 4px;\n  margin-right: 28px;\n}\n.common-panel-tab .bk-tab-header--active {\n  font-weight: 700;\n  color: #63656e;\n}\n.common-panel-tab .bk-tab-content {\n  display: none;\n  width: 0;\n  height: 0;\n}\n.common-panel-tab .delete-all {\n  margin-left: auto;\n}\n.common-panel-tab .delete-all:hover {\n  color: #3a84ff;\n  cursor: pointer;\n}.common-submit {\n  flex: 0 0 64px;\n  width: 64px;\n  margin-left: 8px;\n}\n.common-favorite {\n  display: flex;\n  flex: 0 0 32px;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  margin-left: 8px;\n  cursor: pointer;\n  background: #f5f7fa;\n  border-radius: 2px;\n}\n.common-favorite:hover svg path {\n  fill: #3a84ff;\n}/* stylelint-disable declaration-no-important */\n.date-panel {\n  display: flex;\n  flex-direction: column;\n  width: 220px;\n  user-select: none;\n  background: #fff;\n  border: 1px solid #dcdee5;\n  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1019607843);\n}\n.date-panel-title {\n  display: flex;\n  flex: 0 0 40px;\n  align-items: center;\n  height: 40px;\n  padding: 0 12px;\n  color: #63656e;\n  border-bottom: 1px solid #dcdee5;\n}\n.date-panel-title .title-check {\n  margin-left: auto;\n}\n.date-panel-title .title-check .bk-checkbox {\n  pointer-events: none;\n}\n.date-panel-main {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  padding: 8px 0 12px 0;\n}\n.date-panel-main .date-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n}\n.date-panel-main .date-header-center {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 700;\n}\n.date-panel-main .date-header-center .date-split {\n  width: 5px;\n  height: 2px;\n  margin: 0 10px;\n  background-color: #63656e;\n}\n.date-panel-main .date-header-right, .date-panel-main .date-header-left {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 6px;\n  font-size: 16px;\n}\n.date-panel-main .date-header-right .hand-icon, .date-panel-main .date-header-left .hand-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  font-weight: bold;\n  color: #979ba5;\n}\n.date-panel-main .date-header-right .hand-icon svg, .date-panel-main .date-header-left .hand-icon svg {\n  width: 20px !important;\n  height: 20px !important;\n  font-weight: bold;\n}\n.date-panel-main .date-header-right .hand-icon:hover, .date-panel-main .date-header-left .hand-icon:hover {\n  color: #3a84ff;\n  cursor: pointer;\n}\n.date-panel-main .date-header-right .hand-icon:hover svg, .date-panel-main .date-header-left .hand-icon:hover svg {\n  fill: #3a84ff;\n}\n.date-panel-main .date-header-right {\n  margin-left: auto;\n}\n.date-panel-main .date-content {\n  display: flex;\n  flex-direction: column;\n}\n.date-panel-main .date-content .date-grid {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 0 12px;\n  margin: 0;\n}\n.date-panel-main .date-content .date-grid-item {\n  display: flex;\n  flex: 0 0 14.285%;\n  align-items: center;\n  justify-content: center;\n  width: 14.285%;\n  min-width: 28px;\n  height: 24px;\n}\n.date-panel-main .date-content .date-grid-item:not(.not-click):hover {\n  cursor: pointer;\n  background-color: #f0f1f5;\n}\n.date-panel-main .date-content .date-grid-item.is-today {\n  color: #3a84ff;\n  border: 1px solid #a3c5fd;\n  border-radius: 2px;\n}\n.date-panel-main .date-content .date-grid-item.is-last-month {\n  color: #c4c6cc;\n  background-color: #f0f1f5;\n}\n.date-panel-main .date-content .date-grid-item.is-next-month {\n  color: #c4c6cc;\n}\n.date-panel-main .date-content .date-grid-item.is-disabled {\n  color: #c4c6cc !important;\n  cursor: not-allowed !important;\n  background-color: #f5f7fa !important;\n}\n.date-panel-main .date-content .date-grid-item.is-selected {\n  color: #fff !important;\n  background-color: #3a84ff !important;\n  border-radius: 2px;\n}/* stylelint-disable declaration-no-important */\n.date-wrapper {\n  display: flex;\n  flex-direction: column;\n}\n.date-wrapper .date-input {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: 56px;\n}\n.date-wrapper .date-input .date-picker {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 360px;\n  height: 32px;\n  background: #fff;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n}\n.date-wrapper .date-input .date-picker-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 6px;\n  margin-left: 8px;\n}\n.date-wrapper .date-input .date-picker-start, .date-wrapper .date-input .date-picker-end {\n  width: 160px;\n  height: 24px;\n  padding: 0 4px;\n  font-size: 12px;\n  color: #63656e;\n  border: none;\n  border-radius: 2px;\n}\n.date-wrapper .date-input .date-picker-start:focus, .date-wrapper .date-input .date-picker-end:focus {\n  background: #e1ecff;\n  border: none;\n  outline: none;\n  box-shadow: none;\n}\n.date-wrapper .date-input .date-picker-split {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 8px;\n  color: #979ba5;\n}\n.date-wrapper .date-input .date-picker-clear {\n  display: none !important;\n  flex: 0 0 32px;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  font-size: 14px;\n  color: #c4c6cc;\n}\n.date-wrapper .date-input .date-picker-clear:hover {\n  color: #63656e;\n  cursor: pointer;\n}\n.date-wrapper .date-input .date-picker:hover .date-picker-clear {\n  display: flex !important;\n}\n.date-wrapper .show-format {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 100%;\n  margin: -4px 0 8px 0;\n  color: #979ba5;\n}\n.date-wrapper .show-format .format-button {\n  margin-left: 0px;\n}\n.date-format-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 500px;\n  background: #ffffff;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1019607843);\n}\n.date-format-wrapper .content-title {\n  margin-bottom: 12px;\n  font-weight: bold;\n  line-height: 20px;\n}\n.date-format-wrapper .content-table {\n  display: flex;\n  flex-direction: column;\n  padding: 6px 0;\n  border-collapse: collapse;\n  background-color: #fff;\n  border-top: 0;\n  border-left: 0;\n}\n.date-format-wrapper .content-table th,\n.date-format-wrapper .content-table td {\n  height: 32px;\n  padding: 0px 10px;\n  line-height: 32px;\n  color: #63656e;\n  text-align: left;\n  border-right: 0;\n  border-bottom: 0;\n}\n.date-format-wrapper .content-table thead,\n.date-format-wrapper .content-table tr {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n.date-format-wrapper .content-table thead th,\n.date-format-wrapper .content-table tr th {\n  flex: 1;\n  background-color: #fafbfd;\n}\n.date-format-wrapper .content-table tbody {\n  display: block;\n  width: 100%;\n  max-height: 300px;\n  overflow: auto;\n}\n.date-format-wrapper .content-table tbody td {\n  display: flex;\n  flex: 1;\n  align-items: center;\n}\n.date-format-wrapper.enable-format-click tr {\n  cursor: pointer;\n}\n.date-format-wrapper.enable-format-click tr:hover {\n  background: #f0f5ff;\n}\n.date-format-wrapper.enable-format-click tr:hover td {\n  color: #3a84ff;\n}.natural-picker {\n  display: flex;\n  align-items: center;\n  min-height: 56px;\n}\n.natural-picker .natural-date {\n  width: 256px;\n}\n.natural-picker .natural-unit {\n  width: 140px;\n  margin-left: 8px;\n}\n.natural-picker.is-invalid .bk-input {\n  border-color: #ea3636;\n}\n.natural-custom-option {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 250px;\n  height: 100%;\n  padding: 0 12px;\n  margin: 0 -12px;\n}\n.natural-custom-option .bk-input {\n  background-color: white;\n}.baseline-picker {\n  display: flex;\n  align-items: center;\n  min-height: 56px;\n  margin-right: -1px;\n}\n.baseline-picker-select {\n  width: 208px;\n}\n.baseline-picker-select .bk-input {\n  margin-right: -4px;\n  border-top-right-radius: 0px;\n  border-bottom-right-radius: 0px;\n}\n.baseline-custom-option {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 0 12px;\n  margin: 0 -12px;\n}\n.baseline-custom-option .bk-input {\n  background-color: white;\n}\n.baseline-custom-option .specific-date {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 174px;\n  height: 26px;\n  background: #fff;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n}\n.baseline-custom-option .specific-date-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 6px;\n  margin-left: 8px;\n}\n.baseline-custom-option .specific-date-input {\n  width: 140px;\n  height: 20px;\n  padding: 0 4px;\n  font-size: 12px;\n  color: #63656e;\n  border: none;\n  border-radius: 2px;\n}\n.baseline-custom-option .specific-date-input:focus {\n  background: #e1ecff;\n  border: none;\n  outline: none;\n  box-shadow: none;\n}\n.baseline-custom-option .specific-date-panel {\n  position: fixed;\n  top: 166px;\n  left: 188px;\n  z-index: 1000;\n  border-radius: 2px;\n}.recent-picker {\n  display: flex;\n  align-items: center;\n  min-height: 56px;\n}\n.recent-picker .recent-input {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.recent-picker .recent-input.is-focused {\n  z-index: 2;\n}\n.recent-picker .recent-unit {\n  min-width: 64px;\n}\n.recent-picker .recent-unit .bk-input {\n  margin-left: -1px;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.recent-picker .recent-unit .bk-input--text {\n  border-radius: 0;\n}\n.recent-picker.is-invalid .recent-input {\n  border-color: #ea3636;\n}\n.recent-picker.is-invalid .bk-input {\n  border-color: #ea3636;\n}.timezone-picker {\n  width: 100%;\n}\n.timezone-picker-option {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  color: #63656e;\n}\n.timezone-picker-option .option-name {\n  flex: 1;\n}\n.timezone-picker-option .option-country {\n  display: flex;\n  width: 100%;\n  margin-left: 6px;\n  color: #999;\n}\n.timezone-picker-option .option-utc {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 8px;\n  background: #f0f1f5;\n  border-radius: 2px;\n}\n.timezone-picker-option.is-selected {\n  color: #3a84ff;\n}\n.timezone-picker-option.is-selected .option-country {\n  color: #699df4;\n}\n.timezone-picker-option.is-selected .option-utc {\n  color: white;\n  background-color: #699df4;\n}.panel-wrapper {\n  width: 510px;\n  padding: 12px 16px 0 16px;\n  background: #fff;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1019607843);\n}\n.panel-wrapper .common-date-list {\n  height: 136px;\n  max-height: 136px;\n  padding: 0;\n  padding-bottom: 4px;\n  margin: 12px -10px 0 0;\n  overflow: auto;\n}\n.panel-wrapper .common-date-list .list-item {\n  display: inline-flex;\n  align-items: center;\n  min-width: calc(33.33% - 8px);\n  height: 28px;\n  padding: 0 8px;\n  margin-right: 8px;\n  margin-bottom: 8px;\n  color: #313238;\n  cursor: pointer;\n  background: #f5f7fa;\n  border-radius: 2px;\n}\n.panel-wrapper .common-date-list .list-item.is-recent-item {\n  min-width: inherit;\n  height: 24px;\n  padding: 0 6px;\n  color: #63656e;\n}\n.panel-wrapper .common-date-list .list-item.is-selected {\n  color: #3a84ff;\n  background: #e1ecff;\n}\n.panel-wrapper .common-date-list .list-item.is-disabled {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  background: #f5f7fa;\n}\n.panel-wrapper .common-date-list .list-item:not(.is-disabled):hover {\n  color: #3a84ff;\n  background: #e1ecff;\n}\n.panel-wrapper .date-pick-tab {\n  padding-top: 12px;\n  border-top: 1px solid #eaebf0;\n}\n.panel-wrapper .date-pick-tab .bk-tab-header-item {\n  /* stylelint-disable-next-line declaration-no-important */\n  margin-right: 20px !important;\n}\n.panel-wrapper .time-zone-panel {\n  display: flex;\n  align-items: center;\n  height: 45px;\n  padding: 0 16px;\n  margin: 0 -16px;\n  color: #313238;\n  background: #fafbfd;\n  border-top: 1px solid #dcdee5;\n}\n.panel-wrapper .time-zone-panel .time-zone {\n  display: flex;\n  align-items: center;\n  margin: 0 8px;\n}\n.panel-wrapper .time-zone-panel .time-zone-area {\n  display: flex;\n  align-items: center;\n  margin-left: 8px;\n  color: #979ba5;\n}\n.panel-wrapper .time-zone-panel .time-zone-tag {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 79px;\n  height: 20px;\n  color: #63656e;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n}\n.panel-wrapper .time-zone-panel .time-zone-btn {\n  margin-left: auto;\n}\n.panel-wrapper .time-zone-picker {\n  margin: 8px 0;\n}\n.panel-wrapper .common-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 139px;\n  max-height: 139px;\n  overflow: auto;\n}\n.panel-wrapper .common-wrapper .empty-content {\n  height: 100px;\n  max-height: 100px;\n}\n.panel-wrapper .common-wrapper .empty-tips {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}.__bk_date_picker__ {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  height: 32px;\n  padding: 0 4px;\n  font-size: 12px;\n  color: #63656e;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n  /* stylelint-disable-next-line no-descending-specificity */\n}\n.__bk_date_picker__ div::-webkit-scrollbar,\n.__bk_date_picker__ ul::-webkit-scrollbar,\n.__bk_date_picker__ section::-webkit-scrollbar,\n.__bk_date_picker__ tbody::-webkit-scrollbar,\n.__bk_date_picker__ article::-webkit-scrollbar {\n  width: 4px;\n  height: 4px;\n}\n.__bk_date_picker__ div::-webkit-scrollbar-thumb,\n.__bk_date_picker__ ul::-webkit-scrollbar-thumb,\n.__bk_date_picker__ section::-webkit-scrollbar-thumb,\n.__bk_date_picker__ tbody::-webkit-scrollbar-thumb,\n.__bk_date_picker__ article::-webkit-scrollbar-thumb {\n  background: #ddd;\n  border-radius: 20px;\n  box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);\n}\n.__bk_date_picker__ .date-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  font-size: 20px;\n  font-weight: bold;\n  color: #989ca7;\n  background: #f5f7fa;\n  border-radius: 2px;\n}\n.__bk_date_picker__ .date-icon-left, .__bk_date_picker__ .date-icon-right {\n  display: inline-flex;\n}\n.__bk_date_picker__ .date-icon-left svg, .__bk_date_picker__ .date-icon-right svg {\n  /* stylelint-disable-next-line declaration-no-important */\n  width: 20px !important;\n  /* stylelint-disable-next-line declaration-no-important */\n  height: 20px !important;\n}\n.__bk_date_picker__ .date-icon:hover {\n  cursor: pointer;\n  background-color: #f0f1f5;\n}\n.__bk_date_picker__.is-simplicity {\n  border-color: transparent;\n}\n.__bk_date_picker__.is-simplicity .date-icon {\n  background-color: transparent;\n}\n.__bk_date_picker__.is-simplicity .date-icon:hover {\n  cursor: pointer;\n  background-color: #f0f1f5;\n}\n.__bk_date_picker__.is-disabled {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  /* stylelint-disable-next-line no-descending-specificity */\n}\n.__bk_date_picker__.is-disabled .date-icon {\n  color: #c4c6cc;\n  pointer-events: none;\n}\n.__bk_date_picker__.is-disabled .date-content {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n.__bk_date_picker__ .date-content {\n  display: flex;\n  align-items: center;\n  height: 24px;\n  padding: 0 6px;\n  margin: 0 4px;\n  user-select: none;\n  border-radius: 2px;\n}\n.__bk_date_picker__ .date-content-icon {\n  margin-right: 4px;\n}\n.__bk_date_picker__ .date-content-utc {\n  display: flex;\n  align-items: center;\n  margin-left: 4px;\n  font-weight: 700;\n  color: #ff9c01;\n}\n.__bk_date_picker__ .date-content:hover {\n  cursor: pointer;\n  background: #f5f7fa;\n}\n.__bk-date-picker-popover__ {\n  /* stylelint-disable-next-line declaration-no-important */\n  padding: 0 !important;\n  /* stylelint-disable-next-line declaration-no-important */\n  margin: 0 !important;\n  /* stylelint-disable-next-line declaration-no-important */\n  color: #63656e !important;\n}\n.__bk-date-picker-popover__ div::-webkit-scrollbar,\n.__bk-date-picker-popover__ ul::-webkit-scrollbar,\n.__bk-date-picker-popover__ section::-webkit-scrollbar,\n.__bk-date-picker-popover__ tbody::-webkit-scrollbar,\n.__bk-date-picker-popover__ article::-webkit-scrollbar {\n  width: 4px;\n  height: 4px;\n}\n.__bk-date-picker-popover__ div::-webkit-scrollbar-thumb,\n.__bk-date-picker-popover__ ul::-webkit-scrollbar-thumb,\n.__bk-date-picker-popover__ section::-webkit-scrollbar-thumb,\n.__bk-date-picker-popover__ tbody::-webkit-scrollbar-thumb,\n.__bk-date-picker-popover__ article::-webkit-scrollbar-thumb {\n  background: #ddd;\n  border-radius: 20px;\n  box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);\n}\n.__bk-date-picker-popover__.__bk-date-picker-baseline-popover__ {\n  /* stylelint-disable-next-line declaration-no-important */\n  overflow: inherit !important;\n}\n.__bk-date-picker-popover__.__bk-date-picker-baseline-popover__ .time-range-select-content {\n  transform: scale(1);\n}\n.__bk-date-picker-popover__.__date-picker-popover-specific__ {\n  position: absolute;\n}\n.__bk-date-picker-popover__ ul {\n  padding: 0;\n  margin: 0;\n}\n.__bk-date-picker-popover__ ul li {\n  list-style: none;\n}\n.__bk-date-picker-popover__ .bk-select-search-wrapper .icon-search::before {\n  /* stylelint-disable-next-line declaration-no-important */\n  content: "" !important;\n}\n.__bk-date-picker-popover__ .bk-pop-confirm {\n  /* stylelint-disable-next-line declaration-no-important */\n  margin: 20px 16px 16px 16px !important;\n}\n.__date-tooltips__ {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  max-width: 156px;\n  line-height: 20px;\n}\n.__date-tooltips__ div::-webkit-scrollbar,\n.__date-tooltips__ ul::-webkit-scrollbar,\n.__date-tooltips__ section::-webkit-scrollbar,\n.__date-tooltips__ tbody::-webkit-scrollbar,\n.__date-tooltips__ article::-webkit-scrollbar {\n  width: 4px;\n  height: 4px;\n}\n.__date-tooltips__ div::-webkit-scrollbar-thumb,\n.__date-tooltips__ ul::-webkit-scrollbar-thumb,\n.__date-tooltips__ section::-webkit-scrollbar-thumb,\n.__date-tooltips__ tbody::-webkit-scrollbar-thumb,\n.__date-tooltips__ article::-webkit-scrollbar-thumb {\n  background: #ddd;\n  border-radius: 20px;\n  box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);\n}\n.__date-tooltips__ .date-tooltips-timezone {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: 4px;\n  color: #ff9c01;\n}\n.__date-tooltips__ .date-tooltips-diff {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 4px;\n  margin-top: 4px;\n  color: white;\n  background: rgba(255, 255, 255, 0.12);\n  border-radius: 2px;\n}';
   document.head.appendChild(__vite_style__);
+  function useKeydownEnter(callback) {
+    const scope = vue.effectScope();
+    const handleKeydown = (event) => {
+      if (event.key === "Enter") {
+        callback(event);
+      }
+    };
+    scope.run(() => {
+      window.addEventListener("keydown", handleKeydown);
+    });
+    const stop = () => {
+      scope.stop();
+      window.removeEventListener("keydown", handleKeydown);
+    };
+    if (vue.getCurrentScope()) {
+      vue.onScopeDispose(stop);
+    }
+    return stop;
+  }
   const getCookieByName = (name) => {
     const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`));
     if (match) {
@@ -2559,7 +2578,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       dayjs.extend(customParseFormat);
       const props = __props;
       const emits = __emit;
@@ -2732,7 +2751,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         hiddenEndPanel();
       };
       const handleSubmit = () => {
-        if (startDate.value && endDate.value) {
+        if (startDate.value && endDate.value && canConfirm.value) {
           const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
           const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
           isValidate.value = validateDateValue([startValue || "", endValue || ""]);
@@ -2754,6 +2773,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           hiddenEndPanel();
         }
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         var _a;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
@@ -2962,7 +2984,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const emits = __emit;
       const props = __props;
       const inputRef = vue.ref();
@@ -3091,6 +3113,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         });
         emits("change", value);
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(
           vue.Fragment,
@@ -3532,7 +3557,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       value: {}
     },
     emits: ["change"],
-    setup(__props, { emit: __emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const emits = __emit;
       const props = __props;
       const recentUnit = vue.ref("m");
@@ -3555,7 +3580,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
       );
       const handleSubmit = () => {
-        if (!dateValue.value) return;
+        if (!dateValue.value || !canSubmit.value) return;
         const emitDate = props.type === DateMode.FUTURE ? [NowConstant, `${DateMode.FUTURE}${dateValue.value}${recentUnit.value}`] : [`${DateMode.RECENT}${dateValue.value}${recentUnit.value}`, NowConstant].map(
           (v) => recentBaselineTime.value && recentBaselineTime.value !== NowConstant ? v.replace(NowConstant, `(${recentBaselineTime.value})`) : v
         );
@@ -3567,6 +3592,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         emits("change", emitDate);
       };
+      __expose({
+        handleSubmit
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(
           vue.Fragment,
@@ -3868,6 +3896,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const { validMsg, validateDateRange } = useValidate();
       const timezoneSet = vue.ref(false);
       const activePanel = vue.ref("common");
+      const component = vue.ref();
       const defaultTabKey = vue.computed(() => {
         const tab = localStorage.getItem(getStoreTabKey(version.value));
         if (!tab) return DateMode.Date;
@@ -3889,6 +3918,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           return new DateRange(date, format.value, props.timezone);
         })
       );
+      useKeydownEnter(() => {
+        var _a;
+        (_a = component.value) == null ? void 0 : _a.handleSubmit();
+      });
       const handleChange = (date) => {
         emits("change", date);
       };
@@ -3995,6 +4028,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             null,
             [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getComponent()), {
+                ref_key: "component",
+                ref: component,
                 key: activeDatePickTab.value,
                 type: activeDatePickTab.value,
                 value: _ctx.defaultDate,