diff --git a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
index 34edf26be4..33ef0d0e05 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@@ -159,18 +159,10 @@ class TimeDateRangeServiceImpl extends WidgetService {
       const nowYear = now.getFullYear()
       const nowDate = now.getDate()
 
-      const tarYear = nowYear
       if (dynamicSuffix === 'before') {
-        const deffMonth = nowMonth - dynamicPrefix
-        let diffYear = deffMonth / 12
-        if (deffMonth < 0) {
-          diffYear -= 1
-        }
-        return new Date(tarYear + diffYear, nowMonth - dynamicPrefix % 12, nowDate).getTime()
+        return new Date(nowYear, nowMonth - dynamicPrefix, nowDate).getTime()
       } else {
-        const deffMonth = nowMonth + dynamicPrefix
-        const diffYear = deffMonth / 12
-        return new Date(tarYear + diffYear, deffMonth % 12, nowDate).getTime()
+        return new Date(nowYear, nowMonth + dynamicPrefix, nowDate).getTime()
       }
     }
     if (dynamicInfill === 'year') {
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
index 1a9e0c6deb..90c85c6a1b 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@@ -1,4 +1,6 @@
-import { WidgetService } from '../service/WidgetService'
+import {
+  WidgetService
+} from '../service/WidgetService'
 
 const leftPanel = {
   icon: 'iconfont icon-ri',
@@ -45,7 +47,9 @@ const drawPanel = {
 
 class TimeDateServiceImpl extends WidgetService {
   constructor(options = {}) {
-    Object.assign(options, { name: 'timeDateWidget' })
+    Object.assign(options, {
+      name: 'timeDateWidget'
+    })
     super(options)
     this.filterDialog = true
     this.showSwitch = false
@@ -111,16 +115,10 @@ class TimeDateServiceImpl extends WidgetService {
         const nowYear = now.getFullYear()
         const nowDate = now.getDate()
 
-        const tarYear = nowYear
         if (dynamicSuffix === 'before') {
-          const deffMonth = nowMonth - dynamicPrefix
-          const diffYear = Math.floor(deffMonth / 12)
-
-          return new Date(tarYear + diffYear, nowMonth - dynamicPrefix % 12, nowDate).getTime()
+          return new Date(nowYear, nowMonth - dynamicPrefix, nowDate).getTime()
         } else {
-          const deffMonth = nowMonth + dynamicPrefix
-          const diffYear = deffMonth / 12
-          return new Date(tarYear + diffYear, deffMonth % 12, nowDate).getTime()
+          return new Date(nowYear, nowMonth + dynamicPrefix, nowDate).getTime()
         }
       }
       if (dynamicInfill === 'year') {
@@ -134,5 +132,7 @@ class TimeDateServiceImpl extends WidgetService {
     }
   }
 }
-const timeDateServiceImpl = new TimeDateServiceImpl({ name: 'timeDateWidget' })
+const timeDateServiceImpl = new TimeDateServiceImpl({
+  name: 'timeDateWidget'
+})
 export default timeDateServiceImpl
diff --git a/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue b/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
index 06ea0b0cd0..02d0e820af 100644
--- a/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
+++ b/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
@@ -11,7 +11,12 @@
 
       <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.relative')">
 
-        <el-select v-model="element.options.attrs.default.dkey" placeholder="" class="relative-time" @change="dkeyChange">
+        <el-select
+          v-model="element.options.attrs.default.dkey"
+          placeholder=""
+          class="relative-time"
+          @change="dkeyChange"
+        >
           <el-option :label="$t('dynamic_time.today')" :value="0" />
           <el-option :label="$t('dynamic_time.yesterday')" :value="1" />
           <el-option :label="$t('dynamic_time.firstOfMonth')" :value="2" />
@@ -22,12 +27,31 @@
 
       <div class="inline">
 
-        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="">
-          <el-input v-model="element.options.attrs.default.dynamicPrefix" type="number" size="mini" :min="1" :max="12" @input="dynamicPrefixChange" />
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3"
+          label=""
+        >
+          <el-input
+            v-model="element.options.attrs.default.dynamicPrefix"
+            type="number"
+            size="mini"
+            :min="1"
+            :max="12"
+            @input="dynamicPrefixChange"
+          />
         </el-form-item>
 
-        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
-          <el-select v-model="element.options.attrs.default.dynamicInfill" size="mini" placeholder="" @change="dynamicInfillChange">
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3"
+          label=""
+          class="no-label-item"
+        >
+          <el-select
+            v-model="element.options.attrs.default.dynamicInfill"
+            size="mini"
+            placeholder=""
+            @change="dynamicInfillChange"
+          >
             <el-option :label="$t('dynamic_time.date')" value="day" />
             <el-option :label="$t('dynamic_time.week')" value="week" />
             <el-option :label="$t('dynamic_time.month')" value="month" />
@@ -35,9 +59,18 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3"
+          label=""
+          class="no-label-item"
+        >
 
-          <el-select v-model="element.options.attrs.default.dynamicSuffix" size="mini" placeholder="" @change="dynamicSuffixChange">
+          <el-select
+            v-model="element.options.attrs.default.dynamicSuffix"
+            size="mini"
+            placeholder=""
+            @change="dynamicSuffixChange"
+          >
             <el-option :label="$t('dynamic_time.before')" value="before" />
             <el-option :label="$t('dynamic_time.after')" value="after" />
           </el-select>
@@ -46,13 +79,7 @@
       </div>
 
       <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
-        <el-date-picker
-          v-model="dval"
-          type="date"
-          disabled
-          placeholder=""
-          class="relative-time"
-        />
+        <el-date-picker v-model="dval" type="date" disabled placeholder="" class="relative-time" />
       </el-form-item>
 
       <el-form-item v-else :label="$t('dynamic_time.set')">
@@ -71,7 +98,9 @@
 </template>
 
 <script>
-import { ApplicationContext } from '@/utils/ApplicationContext'
+import {
+  ApplicationContext
+} from '@/utils/ApplicationContext'
 export default {
   name: 'DeDateDefault',
   props: {
@@ -117,22 +146,27 @@ export default {
     }
   }
 }
+
 </script>
 
 <style lang="scss" scoped>
-.inline {
-  display: flex;
-  >>>.el-input--mini {
-      min-width: 70px;
+  .inline {
+    display: flex;
+
   }
-}
-.inline{
+
+  .inline {
     .el-form-item {
       margin-bottom: 5px !important;
+
+      .el-form-item__content>.el-input--mini {
+        min-width: 70px;
+      }
     }
   }
-.relative-time {
-    width: 100%;
-}
+
+  .relative-time {
+    width: 100% !important;
+  }
 
 </style>
diff --git a/frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue b/frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue
index f0b707259b..9241ed82c2 100644
--- a/frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue
+++ b/frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue
@@ -223,21 +223,20 @@ export default {
   .inline-first,
   .inline {
     display: flex;
-
-    >>>.el-input--mini {
-      min-width: 70px;
-    }
-
   }
 
   .inline-first {
     .el-form-item {
       margin-bottom: 5px !important;
+
+      .el-form-item__content>.el-input--mini {
+        min-width: 70px;
+      }
     }
   }
 
   .relative-time {
-    width: 100%;
+    width: 100% !important;
   }
 
 </style>