diff --git a/core/core-frontend/src/custom-component/v-query/Time.vue b/core/core-frontend/src/custom-component/v-query/Time.vue
index 0600db27e8..f3003a3eb1 100644
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { toRefs, PropType, ref, onBeforeMount, watch, nextTick, computed, h } from 'vue'
+import { toRefs, PropType, ref, onBeforeMount, watch, nextTick, computed } from 'vue'
 import { type DatePickType } from 'element-plus-secondary'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import type { ManipulateType } from 'dayjs'
@@ -81,8 +81,108 @@ watch(
     })
   }
 )
-const callback = () => {
-  return true
+const isInRange = (ele, startWindowTime, timeStamp) => {
+  const {
+    intervalType,
+    regularOrTrends,
+    regularOrTrendsValue,
+    relativeToCurrent,
+    timeNum,
+    relativeToCurrentType,
+    around,
+    dynamicWindow,
+    maximumSingleQuery,
+    timeNumRange,
+    relativeToCurrentTypeRange,
+    aroundRange
+  } = ele.timeRange || {}
+  let isDynamicWindowTime = false
+  const noTime = ele.timeGranularityMultiple.split('time').join('').split('range')[0]
+  const queryTimeType = noTime === 'date' ? 'day' : (noTime as ManipulateType)
+  if (startWindowTime && dynamicWindow) {
+    isDynamicWindowTime =
+      dayjs(startWindowTime)
+        .add(maximumSingleQuery, queryTimeType)
+        .startOf(queryTimeType)
+        .valueOf() -
+        1000 <
+      timeStamp
+  }
+
+  if (intervalType === 'none') {
+    if (dynamicWindow) return isDynamicWindowTime
+    return false
+  }
+  let startTime
+  if (relativeToCurrent === 'custom') {
+    startTime = getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
+  } else {
+    switch (relativeToCurrent) {
+      case 'thisYear':
+        startTime = getThisStart('year')
+        break
+      case 'lastYear':
+        startTime = getLastStart('year')
+        break
+      case 'thisMonth':
+        startTime = getThisStart('month')
+        break
+      case 'lastMonth':
+        startTime = getLastStart('month')
+        break
+      case 'today':
+        startTime = getThisStart('day')
+        break
+      case 'yesterday':
+        startTime = getLastStart('day')
+        break
+      case 'monthBeginning':
+        startTime = getThisStart('month')
+        break
+      case 'yearBeginning':
+        startTime = getThisStart('year')
+        break
+
+      default:
+        break
+    }
+  }
+  const startValue = regularOrTrends === 'fixed' ? regularOrTrendsValue : startTime
+  if (intervalType === 'start') {
+    return startWindowTime < +new Date(startValue) || isDynamicWindowTime
+  }
+
+  if (intervalType === 'end') {
+    return timeStamp > +new Date(startValue) || isDynamicWindowTime
+  }
+
+  if (intervalType === 'timeInterval') {
+    const startTime =
+      regularOrTrends === 'fixed'
+        ? regularOrTrendsValue[0]
+        : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
+    const endTime =
+      regularOrTrends === 'fixed'
+        ? regularOrTrendsValue[1]
+        : getAround(
+            relativeToCurrentTypeRange,
+            aroundRange === 'f' ? 'subtract' : 'add',
+            timeNumRange
+          )
+    return (
+      startWindowTime < +new Date(startTime) - 1000 ||
+      timeStamp > +new Date(endTime) ||
+      isDynamicWindowTime
+    )
+  }
+}
+const callback = param => {
+  startWindowTime.value = param[0]
+  const disabled = param.some(ele => {
+    return disabledDate(ele)
+  })
+  startWindowTime.value = 0
+  return disabled
 }
 
 const { shortcuts } = useShortcuts(callback)
@@ -382,7 +482,9 @@ const formatDate = computed(() => {
     @calendar-change="calendarChange"
     :format="formatDate"
     v-if="multiple"
-    :shortcuts="shortcuts"
+    :shortcuts="
+      ['datetimerange', 'daterange'].includes(config.timeGranularityMultiple) ? shortcuts : []
+    "
     @change="handleValueChange"
     :range-separator="$t('cron.to')"
     :start-placeholder="$t('datasource.start_time')"
diff --git a/core/core-frontend/src/custom-component/v-query/shortcuts.ts b/core/core-frontend/src/custom-component/v-query/shortcuts.ts
index 06433f1fd1..c2fcd5fef1 100644
--- a/core/core-frontend/src/custom-component/v-query/shortcuts.ts
+++ b/core/core-frontend/src/custom-component/v-query/shortcuts.ts
@@ -37,70 +37,75 @@ let callback: Function = () => {}
 const shortcuts = [
   {
     text: 'dynamic_time.cweek',
-    onClick: ({ attrs, slots, emit }) => {
-      if (
-        callback([
-          new Date(+new Date(getThisStart('week')) + 24 * 1000 * 3600),
-          new Date(+new Date(getThisEnd('week')) + 24 * 1000 * 3600)
-        ])
-      )
-        return
-      emit('pick', [
-        dayjs(new Date(+new Date(getThisStart('week')) + 24 * 1000 * 3600)),
-        dayjs(new Date(+new Date(getThisEnd('week')) + 24 * 1000 * 3600))
-      ])
+    onClick: ({ emit }) => {
+      const startTime = new Date(+new Date(getThisStart('week')) + 24 * 1000 * 3600)
+      const endTime = new Date(+new Date(getThisEnd('week')) + 24 * 1000 * 3600)
+      if (callback([startTime, endTime])) return
+      emit('pick', [dayjs(startTime), dayjs(endTime)])
     }
   },
   {
     text: 'dynamic_month.current',
-    value: () => {
-      return [getThisStart('month'), getThisEnd('month')]
-    },
-    onClick: () => {
-      console.log(113)
+    onClick: ({ emit }) => {
+      const startTime = getThisStart('month')
+      const endTime = getThisEnd('month')
+      if (callback([startTime, endTime])) return
+      emit('pick', [dayjs(startTime), dayjs(endTime)])
     }
   },
   {
     text: 'dynamic_time.cquarter',
-    value: () => {
-      return [getThisStart('quarter'), getThisEnd('quarter')]
-    },
-    onClick: () => {
-      console.log(113)
+    onClick: ({ emit }) => {
+      const startTime = getThisStart('quarter')
+      const endTime = getThisEnd('quarter')
+      if (callback([startTime, endTime])) return
+      emit('pick', [dayjs(startTime), dayjs(endTime)])
     }
   },
   {
     text: 'dynamic_year.current',
-    value: () => {
-      return [getThisStart('year'), getThisEnd('year')]
+    onClick: ({ emit }) => {
+      const startTime = getThisStart('year')
+      const endTime = getThisEnd('year')
+      if (callback([startTime, endTime])) return
+      emit('pick', [dayjs(startTime), dayjs(endTime)])
     }
   },
 
   {
     text: 'dynamic_time.lweek',
-    value: () => {
-      return [
-        new Date(+new Date(getLastStart('week')) + 24 * 1000 * 3600),
-        new Date(+new Date(getLastEnd('week')) + 24 * 1000 * 3600)
-      ]
+    onClick: ({ emit }) => {
+      const startTime = new Date(+new Date(getLastStart('week')) + 24 * 1000 * 3600)
+      const endTime = new Date(+new Date(getLastEnd('week')) + 24 * 1000 * 3600)
+      if (callback([startTime, endTime])) return
+      emit('pick', [dayjs(startTime), dayjs(endTime)])
     }
   },
   {
     text: 'dynamic_month.last',
-    value: () => {
-      return [getLastStart('month'), getLastEnd('month')]
+    onClick: ({ emit }) => {
+      const startTime = getLastStart('month')
+      const endTime = getLastEnd('month')
+      if (callback([startTime, endTime])) return
+      emit('pick', [dayjs(startTime), dayjs(endTime)])
     }
   },
   {
     text: 'dynamic_time.lquarter',
-    value: () => {
-      return [getLastStart('quarter'), getLastEnd('quarter')]
+    onClick: ({ emit }) => {
+      const startTime = getLastStart('quarter')
+      const endTime = getLastEnd('quarter')
+      if (callback([startTime, endTime])) return
+      emit('pick', [dayjs(startTime), dayjs(endTime)])
     }
   },
   {
     text: 'dynamic_year.last',
-    value: () => {
-      return [getLastStart('year'), getLastEnd('year')]
+    onClick: ({ emit }) => {
+      const startTime = getLastStart('year')
+      const endTime = getLastEnd('year')
+      if (callback([startTime, endTime])) return
+      emit('pick', [dayjs(startTime), dayjs(endTime)])
     }
   }
 ]