diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index b9d25c17a9..0aeeca52c6 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -86,13 +86,17 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
   componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
   componentData.forEach((item, index) => {
     if (item.component && item.component === 'de-date') {
+      const widget = ApplicationContext.getService(item.serviceName)
       if (item.options.attrs &&
         (!item.options.attrs.default || (item.serviceName === 'timeYearWidget' && item.options.attrs.default.dynamicInfill !== 'year') || (item.serviceName === 'timeMonthWidget' && item.options.attrs.default.dynamicInfill !== 'month'))) {
-        const widget = ApplicationContext.getService(item.serviceName)
         if (widget && widget.defaultSetting) {
           item.options.attrs.default = widget.defaultSetting()
         }
       }
+      if (item.options.attrs && widget.isTimeWidget && widget.isTimeWidget() && !item.options.attrs.hasOwnProperty('showTime')) {
+        item.options.attrs.showTime = false
+        item.options.attrs.accuracy = 'HH:mm'
+      }
     }
     if (item.type === 'custom') {
       item.options.manualModify = false
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index 62976beaa7..c6aa2c46d5 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -4,13 +4,14 @@
     ref="dateRef"
     v-model="values"
     popper-class="coustom-date-picker"
-    :type="element.options.attrs.type"
+    :type="componentType"
     :range-separator="$t(element.options.attrs.rangeSeparator)"
     :start-placeholder="$t(element.options.attrs.startPlaceholder)"
     :end-placeholder="$t(element.options.attrs.endPlaceholder)"
     :placeholder="$t(element.options.attrs.placeholder)"
     :append-to-body="inScreen"
     value-format="timestamp"
+    :format="labelFormat"
     :size="size"
     :editable="false"
     @change="dateChange"
@@ -52,7 +53,6 @@ export default {
       operator: 'between',
       values: null,
       onFocus: false
-
     }
   },
   computed: {
@@ -70,7 +70,26 @@ export default {
     },
     manualModify() {
       return !!this.element.options.manualModify
+    },
+    isTimeWidget() {
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      return widget.isTimeWidget && widget.isTimeWidget()
+    },
+    componentType() {
+      let result = 'date'
+      if (this.isTimeWidget && this.element.options.attrs.showTime) {
+        result = 'datetime'
+      }
+      return result
+    },
+    labelFormat() {
+      const result = 'yyyy-MM-dd'
+      if (this.isTimeWidget && this.element.options.attrs.showTime && this.element.options.attrs.accuracy) {
+        return result + ' ' + this.element.options.attrs.accuracy
+      }
+      return result
     }
+
   },
   watch: {
     'viewIds': function(value, old) {
@@ -194,7 +213,7 @@ export default {
         return results
       } else {
         const value = values[0]
-        return timeSection(parseFloat(value), this.element.options.attrs.type)
+        return timeSection(parseFloat(value), this.componentType || this.element.options.attrs.type, this.labelFormat)
       }
     },
     fillValueDerfault() {
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
index 2931d7afce..fdc7de677b 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@@ -40,7 +40,10 @@ const dialogPanel = {
           ],
           limits: [1, 12]
         }
-      }
+      },
+      showTime: false,
+      accuracy: 'HH:mm'
+
     },
     value: '',
     manualModify: false
@@ -209,9 +212,18 @@ class TimeDateServiceImpl extends WidgetService {
       return results
     } else {
       const value = values[0]
-      return timeSection(parseFloat(value), element.options.attrs.type)
+      const componentType = element.options.attrs.showTime ? 'datetime' : 'date'
+      let labelFormat = 'yyyy-MM-dd'
+      if (element.options.attrs.showTime && element.options.attrs.accuracy) {
+        labelFormat = labelFormat + ' ' + element.options.attrs.accuracy
+      }
+
+      return timeSection(parseFloat(value), componentType || element.options.attrs.type, labelFormat)
     }
   }
+  isTimeWidget() {
+    return true
+  }
 }
 const timeDateServiceImpl = new TimeDateServiceImpl({
   name: 'timeDateWidget'
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index e1ba63ab9f..e8da510e74 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1631,6 +1631,7 @@ export default {
     component_list: 'Component list',
     custom_scope: 'Target',
     multiple_choice: 'Multiple choice',
+    show_time: 'Show time',
     single_choice: 'Single choice',
     field: 'Field',
     unshared_people: 'Unshared people',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 8363f9e010..f0398bcb86 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1632,6 +1632,7 @@ export default {
     component_list: '組件列錶',
     custom_scope: '控製範圍',
     multiple_choice: '多選',
+    show_time: '顯示時間',
     single_choice: '單選',
     field: '字段',
     unshared_people: '未分享人員',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 8753b962f9..e3ff9dcd52 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1641,6 +1641,7 @@ export default {
     custom_scope: '控制范围',
     binding_parameters: '参数',
     multiple_choice: '多选',
+    show_time: '显示时间',
     single_choice: '单选',
     field: '字段',
     unshared_people: '未分享人员',
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index e6db4df3c2..2a2cff8a49 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -1,5 +1,5 @@
 import Cookies from 'js-cookie'
-export function timeSection(date, type) {
+export function timeSection(date, type, labelFormat = 'yyyy-MM-dd') {
   if (!date) {
     return null
   }
@@ -8,10 +8,20 @@ export function timeSection(date, type) {
   }
   const timeRanger = new Array(2)
 
-  date.setHours(0)
-  date.setMinutes(0)
-  date.setSeconds(0)
-  date.setMilliseconds(0)
+  const formatArr = labelFormat ? labelFormat.split(' ') : []
+  const methods = ['setHours', 'setMinutes', 'setSeconds', 'setMilliseconds']
+  let methodsLen = methods.length
+  if (type === 'datetime' && formatArr.length > 1) {
+    const childArr = formatArr[1] ? formatArr[1].split(':') : []
+    const childArrLength = childArr ? childArr.length : 0
+
+    while (--methodsLen >= childArrLength) {
+      date[methods[methodsLen]](0)
+    }
+  } else {
+    methods.forEach(m => date[m](0))
+  }
+
   const end = new Date(date)
   if (type === 'year') {
     date.setDate(1)
@@ -38,6 +48,23 @@ export function timeSection(date, type) {
     end.setMilliseconds(999)
     timeRanger[1] = end.getTime()
   }
+
+  if (type === 'datetime') {
+    methodsLen = methods.length
+    if (formatArr.length > 1) {
+      const childArr = formatArr[1] ? formatArr[1].split(':') : []
+      const childArrLength = childArr ? childArr.length : 0
+
+      while (--methodsLen >= childArrLength) {
+        end[methods[methodsLen]](methodsLen === 0 ? 23 : methodsLen === 3 ? 999 : 59)
+      }
+    } else {
+      while (--methodsLen >= 0) {
+        end[methods[methodsLen]](methodsLen === 0 ? 23 : methodsLen === 3 ? 999 : 59)
+      }
+    }
+    timeRanger[1] = end.getTime()
+  }
   timeRanger[0] = date.getTime()
 
   return timeRanger
diff --git a/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue b/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
index 951ee463dd..33fdfe6d53 100644
--- a/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
+++ b/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
@@ -8,6 +8,7 @@
           <el-radio
             v-for="(item, index) in defaultSetting.radioOptions"
             :key="index"
+            :disabled="isTimeWidget && element.options.attrs.showTime && item.value"
             :label="item.value"
           >
             {{ $t(item.text) }}
@@ -94,7 +95,8 @@
       <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
         <el-date-picker
           v-model="dval"
-          :type="element.options.attrs.type"
+          :type="componentType"
+          :format="labelFormat"
           disabled
           placeholder=""
           class="relative-time"
@@ -139,6 +141,24 @@ export default {
       const widget = ApplicationContext.getService(this.element.serviceName)
       const setting = widget.defaultSetting()
       return setting
+    },
+    isTimeWidget() {
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      return widget.isTimeWidget && widget.isTimeWidget()
+    },
+    componentType() {
+      let result = 'date'
+      if (this.isTimeWidget && this.element.options.attrs.showTime) {
+        result = 'datetime'
+      }
+      return result
+    },
+    labelFormat() {
+      const result = 'yyyy-MM-dd'
+      if (this.isTimeWidget && this.element.options.attrs.showTime && this.element.options.attrs.accuracy) {
+        return result + ' ' + this.element.options.attrs.accuracy
+      }
+      return result
     }
   },
   created() {
diff --git a/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index cadbe34d96..be88fa2b22 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -9,6 +9,37 @@
           @change="multipleChange"
         />
 
+        <span v-if="widget.isTimeWidget && widget.isTimeWidget()" style="padding-left: 10px;">
+          <el-checkbox v-model="attrs.showTime" @change="showTimeChange">
+            <span>{{ $t('panel.show_time') }} </span>
+          </el-checkbox>
+
+          <el-popover v-model="timePopovervisible" placement="bottom-end" :disabled="!attrs.showTime" width="140">
+            <div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
+              <ul class="de-ul">
+                <li
+                  v-for="(node, i) in accuracyOptions"
+                  :key="node.id"
+                  :index="i"
+                  class="de-sort-field-span"
+                  :class="attrs.accuracy === node.id ? 'de-active-li': ''"
+                  @click="attrs.accuracy = node.id"
+                >
+
+                  <span>{{ node.name }}</span>
+                </li>
+              </ul>
+
+            </div>
+
+            <i
+              slot="reference"
+              :class="{'i-filter-active': attrs.showTime, 'i-filter-inactive': !attrs.showTime}"
+              class="el-icon-setting i-filter"
+            />
+          </el-popover>
+        </span>
+
       </div>
     </el-col>
 
@@ -126,7 +157,14 @@ export default {
       attrs: null,
       titlePopovervisible: false,
       popovervisible: false,
-      parametersVisible: false
+      parametersVisible: false,
+      timePopovervisible: false,
+      accuracyOptions: [
+        { id: 'HH', name: 'HH' },
+        { id: 'HH:mm', name: 'HH:mm' },
+        { id: 'HH:mm:ss', name: 'HH:mm:ss' }
+
+      ]
 
     }
   },
@@ -141,6 +179,11 @@ export default {
     multipleChange(value) {
       this.fillAttrs2Filter()
     },
+    showTimeChange(value) {
+      this.attrs.accuracy = this.accuracyOptions[1].id
+      this.attrs.default.isDynamic = false
+      this.fillAttrs2Filter()
+    },
     checkedViewsChange(values) {
       this.fillAttrs2Filter()
     },
@@ -226,4 +269,38 @@ export default {
     overflow: hidden;
   }
 
+.de-ul li {
+  margin: 5px 2px;
+  cursor: pointer;
+
+  &:hover {
+    color: #409EFF;
+    border-color: rgb(198, 226, 255);
+    background-color: rgb(236, 245, 255);
+  }
+
+  &:before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    display: inline-block;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
+}
+
+.de-active-li {
+  &:before {
+    background: #409EFF;
+  }
+}
+
+.de-sort-field-span {
+  display: inline-flexbox;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 </style>