diff --git a/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue b/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
index e41738bc83..79cd6306ed 100644
--- a/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
@@ -149,6 +149,7 @@ const init = () => {
     'end-config'
   )
 
+  console.log('startTime, endTime', startTime, endTime)
   selectValue.value = [startTime, endTime]
 }
 
@@ -164,7 +165,7 @@ const formatDate = computed(() => {
 <template>
   <el-date-picker
     disabled
-    v-if="rendering"
+    v-if="rendering && config.timeGranularityMultiple !== 'yearrange'"
     v-model="selectValue"
     :type="config.timeGranularityMultiple"
     :prefix-icon="Calendar"
@@ -173,4 +174,15 @@ const formatDate = computed(() => {
     :start-placeholder="$t('datasource.start_time')"
     :end-placeholder="$t('datasource.end_time')"
   />
+  <el-date-picker
+    v-else
+    disabled
+    v-model="selectValue"
+    type="yearrange"
+    :prefix-icon="Calendar"
+    format="YYYY"
+    :range-separator="$t('cron.to')"
+    :start-placeholder="$t('datasource.start_time')"
+    :end-placeholder="$t('datasource.end_time')"
+  />
 </template>