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 085df88b69..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,10 +1,11 @@
 <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'
 import { type TimeRange } from './time-format'
 import dayjs from 'dayjs'
+import { useShortcuts } from './shortcuts'
 import { getThisStart, getLastStart, getAround } from './time-format-dayjs'
 import VanPopup from 'vant/es/popup'
 import VanDatePicker from 'vant/es/date-picker'
@@ -80,6 +81,111 @@ watch(
     })
   }
 )
+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)
 
 watch(
   () => config.value.id,
@@ -376,6 +482,9 @@ const formatDate = computed(() => {
     @calendar-change="calendarChange"
     :format="formatDate"
     v-if="multiple"
+    :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
new file mode 100644
index 0000000000..c2fcd5fef1
--- /dev/null
+++ b/core/core-frontend/src/custom-component/v-query/shortcuts.ts
@@ -0,0 +1,124 @@
+import { useI18n } from '@/hooks/web/useI18n'
+import dayjs from 'dayjs'
+import type { ManipulateType, QUnitType } from 'dayjs'
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
+type ManipulateTypeWithQuarter = ManipulateType | 'quarter'
+const { t } = useI18n()
+dayjs.extend(quarterOfYear)
+
+function getThisStart(val = 'month' as ManipulateTypeWithQuarter) {
+  return new Date(dayjs().startOf(val).format('YYYY/MM/DD HH:mm:ss'))
+}
+
+function getThisEnd(val = 'month' as ManipulateTypeWithQuarter) {
+  return new Date(dayjs().endOf(val).format('YYYY/MM/DD HH:mm:ss'))
+}
+
+function getLastStart(val = 'month' as ManipulateTypeWithQuarter) {
+  return new Date(
+    dayjs()
+      .subtract(1, val as QUnitType)
+      .startOf(val)
+      .format('YYYY/MM/DD HH:mm:ss')
+  )
+}
+
+function getLastEnd(val = 'month' as ManipulateTypeWithQuarter) {
+  return new Date(
+    dayjs()
+      .subtract(1, val as QUnitType)
+      .endOf(val)
+      .format('YYYY/MM/DD HH:mm:ss')
+  )
+}
+
+// eslint-disable-next-line
+let callback: Function = () => {}
+const shortcuts = [
+  {
+    text: 'dynamic_time.cweek',
+    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',
+    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',
+    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',
+    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',
+    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',
+    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',
+    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',
+    onClick: ({ emit }) => {
+      const startTime = getLastStart('year')
+      const endTime = getLastEnd('year')
+      if (callback([startTime, endTime])) return
+      emit('pick', [dayjs(startTime), dayjs(endTime)])
+    }
+  }
+]
+
+shortcuts.forEach(ele => {
+  ele.text = t(ele.text)
+})
+
+const useShortcuts = cb => {
+  callback = cb
+  return {
+    shortcuts
+  }
+}
+
+export { useShortcuts }
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index c786d8b41d..ee99b4204e 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -50,6 +50,46 @@ export default {
     filter_condition: '筛选条件',
     no_auth_tips: '缺少菜单权限，请联系管理员'
   },
+  dynamic_time: {
+    set_default: '设置默认值',
+    fix: '固定时间',
+    dynamic: '动态时间',
+    relative: '相对当前',
+    today: '今天',
+    yesterday: '昨天',
+    firstOfMonth: '月初',
+    firstOfYear: '年初',
+    custom: '自定义',
+    date: '日',
+    week: '周',
+    month: '月',
+    year: '年',
+    before: '前',
+    after: '后',
+    preview: '预览',
+    set: '设置',
+
+    cweek: '本周',
+    lweek: '上周',
+    cmonth: '本月',
+    cquarter: '本季',
+    lquarter: '上季',
+    cyear: '本年'
+  },
+  dynamic_year: {
+    fix: '固定年份',
+    dynamic: '动态年份',
+    current: '今年',
+    last: '去年'
+  },
+  dynamic_month: {
+    fix: '固定年月',
+    dynamic: '动态年月',
+    current: '当月',
+    last: '上月',
+    firstOfYear: '当年首月',
+    sameMonthLastYear: '去年同月'
+  },
   data_export: {
     export_center: '数据导出中心',
     export_info: '查看进度，进行下载',