diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index 9d2944983e..73d97c5127 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -62,7 +62,7 @@ export default {
   },
   computed: {
     extPoperClass() {
-      if(this.labelFormat && this.labelFormat.includes('HH') && !this.labelFormat.includes('HH:mm')) {
+      if (this.labelFormat && this.labelFormat.includes('HH') && !this.labelFormat.includes('HH:mm')) {
         return 'de-no-minite'
       }
       return ''
@@ -89,7 +89,7 @@ export default {
     componentType() {
       let result = this.element.options.attrs.type || 'date'
       if (this.isTimeWidget && this.element.options.attrs.showTime) {
-        result = 'datetime'
+        result = this.element.serviceName === 'timeDateWidget' ? 'datetime' : 'datetimerange'
       }
       return result
     },
@@ -127,7 +127,7 @@ export default {
       this.dateChange(this.values)
     },
     'labelFormat': function(val, old) {
-      if(val !== old) {
+      if (val !== old) {
         this.show = false
         this.$nextTick(() => {
           this.show = true
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
index 372ecb68ba..6fcd7d1cd5 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@@ -29,7 +29,9 @@ const dialogPanel = {
         eDynamicPrefix: 1,
         eDynamicInfill: 'day',
         eDynamicSuffix: 'after'
-      }
+      },
+      showTime: false,
+      accuracy: 'HH:mm'
     },
     value: '',
     manualModify: false
@@ -279,9 +281,18 @@ class TimeDateRangeServiceImpl extends WidgetService {
       return results
     } else {
       const value = values[0]
-      return timeSection(parseFloat(value), element.options.attrs.type)
+      const componentType = element.options.attrs.showTime ? 'datetimerange' : 'daterange'
+      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 timeDateRangeServiceImpl = new TimeDateRangeServiceImpl()
 export default timeDateRangeServiceImpl