diff --git a/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js b/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
index ad233b23a..9198d47cb 100644
--- a/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
+++ b/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
@@ -26,6 +26,7 @@ var DateTimeHelper = (function() {
                 id="datetimePicker${formId}${columnId}" />
           <date-time-picker class="w-full" @cleared="clearDate"
                             :teleport="false"
+                            :clearable="true"
                             ref="vueDateTime" @change="updateDate" mode="${mode}"
                             placeholder="${placeholder(mode)}"></date-time-picker>
         </div>
@@ -46,19 +47,21 @@ var DateTimeHelper = (function() {
 
     const inputFields = `
     <div class="datetime-container range-type ${mode}">
+        <input type="hidden" form="${formId}" class="column-range" name="repository_cells[${columnId}]"
+          value='${JSON.stringify({ start_time: startDateTime, end_time: endDateTime })}'>
         <div id="datetimeStartPickerComtainer${formId}${columnId}"
              class="date-container ${mode} vue-date-time-picker-filter min-w-[160px]">
           <input ref="input"
                 data-type="${columnType}"
                 data-simple-format="true"
                 form="${formId}"
-                name="repository_cells[${columnId}][start_time]"
                 class="datetime start" type="hidden"
                 data-default="${startDateTime}"
                 v-model="date"
                 id="datetimeStartPicker${formId}${columnId}" />
           <date-time-picker class="w-full" @cleared="clearDate"
                             :teleport="false"
+                            :clearable="true"
                             ref="vueDateTime" @change="updateDate"
                             mode="${mode}" placeholder="${placeholder(mode)}"></date-time-picker>
         </div>
@@ -69,13 +72,13 @@ var DateTimeHelper = (function() {
                 data-type="${columnType}"
                 data-simple-format="true"
                 form="${formId}"
-                name="repository_cells[${columnId}][end_time]"
                 class="datetime end" type="hidden"
                 data-default="${endDateTime}"
                 v-model="date"
                 id="datetimeEndPicker${formId}${columnId}" />
           <date-time-picker class="w-full" @cleared="clearDate"
                             :teleport="false"
+                            :clearable="true"
                             ref="vueDateTime" @change="updateDate" mode="${mode}"
                             placeholder="${placeholder(mode)}"></date-time-picker>
         </div>
diff --git a/app/assets/javascripts/repositories/validators/base_validator.js b/app/assets/javascripts/repositories/validators/base_validator.js
index bd263c0b0..08199e19a 100644
--- a/app/assets/javascripts/repositories/validators/base_validator.js
+++ b/app/assets/javascripts/repositories/validators/base_validator.js
@@ -91,6 +91,7 @@ $.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
   const $container = $input.parents('.datetime-container');
   const $dateS = $container.find('.datetime.start');
   const $dateE = $container.find('.datetime.end');
+  const $submitField = $container.find('.column-range');
   let isValid = true;
   let errorMessage;
   let startTime;
@@ -114,6 +115,14 @@ $.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
   }
 
   if (isValid) {
+    const oldValue = $submitField.val();
+    let newValue;
+    if ($dateS.val() && $dateE.val()) {
+      newValue = JSON.stringify({ start_time: $dateS.val(), end_time: $dateE.val() });
+    }
+    if (oldValue !== newValue) {
+      $submitField.val(newValue);
+    }
     return true;
   }
 
@@ -126,6 +135,7 @@ $.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) {
   const $container = $input.parents('.datetime-container');
   const $dateS = $container.find('.datetime.start');
   const $dateE = $container.find('.datetime.end');
+  const $submitField = $container.find('.column-range');
   let isValid = true;
   let errorMessage;
   let startTime;
@@ -145,6 +155,14 @@ $.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) {
   }
 
   if (isValid) {
+    const oldValue = $submitField.val();
+    let newValue;
+    if ($dateS.val() && $dateE.val()) {
+      newValue = JSON.stringify({ start_time: $dateS.val(), end_time: $dateE.val() });
+    }
+    if (oldValue !== newValue) {
+      $submitField.val(newValue);
+    }
     return true;
   }
 
@@ -157,6 +175,7 @@ $.fn.dataTable.render.RepositoryTimeRangeValueValidator = function($input) {
   const $container = $input.parents('.datetime-container');
   const $dateS = $container.find('.datetime.start');
   const $dateE = $container.find('.datetime.end');
+  const $submitField = $container.find('.column-range');
   let isValid = true;
   let errorMessage;
   let startTime;
@@ -175,6 +194,14 @@ $.fn.dataTable.render.RepositoryTimeRangeValueValidator = function($input) {
     errorMessage = I18n.t('repositories.table.date_time.errors.not_valid_range');
   }
   if (isValid) {
+    const oldValue = $submitField.val();
+    let newValue;
+    if ($dateS.val() && $dateE.val()) {
+      newValue = JSON.stringify({ start_time: $dateS.val(), end_time: $dateE.val() });
+    }
+    if (oldValue !== newValue) {
+      $submitField.val(newValue);
+    }
     return true;
   }
 
diff --git a/app/javascript/vue/shared/date_time_picker.vue b/app/javascript/vue/shared/date_time_picker.vue
index 7af5a2ce7..0bd7c7f01 100644
--- a/app/javascript/vue/shared/date_time_picker.vue
+++ b/app/javascript/vue/shared/date_time_picker.vue
@@ -92,12 +92,8 @@
         }
       },
       datetime: function () {
-        if (this.manualUpdate) {
-          this.manualUpdate = false;
-          return;
-        }
-
         if (this.mode == 'time') {
+
           this.time = {
             hours: this.datetime ? this.datetime.getHours() : 0,
             minutes: this.datetime ? this.datetime.getMinutes() : 0
@@ -105,6 +101,11 @@
           return
         }
 
+        if (this.manualUpdate) {
+          this.manualUpdate = false;
+          return;
+        }
+
         if ( this.datetime == null) {
           this.$emit('cleared');
         }