diff --git a/app/javascript/vue/shared/filters/inputs/date_range_filter.vue b/app/javascript/vue/shared/filters/inputs/date_range_filter.vue
index c370c28c3..73519e1b8 100644
--- a/app/javascript/vue/shared/filters/inputs/date_range_filter.vue
+++ b/app/javascript/vue/shared/filters/inputs/date_range_filter.vue
@@ -4,7 +4,7 @@
       <label class="sci-label">{{ filter.label }}</label>
       <div class="w-full mb-2">
         <DateTimePicker
-          :defaultValue="dateFrom"
+          :defaultValue="dateFromObject"
           class="w-full"
           @change="updateDateFrom"
           @cleared="updateDateFrom"
@@ -18,7 +18,7 @@
       </div>
       <div class="w-full">
         <DateTimePicker
-        :defaultValue="dateTo"
+        :defaultValue="dateToObject"
           class="w-full"
           @change="updateDateTo"
           @cleared="updateDateTo"
@@ -46,16 +46,16 @@ export default {
   components: { DateTimePicker },
   data() {
     return {
-      dateFrom: null,
-      dateTo: null
+      dateFrom: this.values[`${this.filter.key}_from`],
+      dateTo: this.values[`${this.filter.key}_to`]
     };
   },
-  created() {
-    if (this.values[`${this.filter.key}_from`]) {
-      this.dateFrom = new Date(this.values[`${this.filter.key}_from`])
-    }
-    if (this.values[`${this.filter.key}_to`]) {
-      this.dateTo = new Date(this.values[`${this.filter.key}_to`]);
+  computed: {
+    dateFromObject() {
+      return this.dateFrom ? new Date(this.dateFrom) : null;
+    },
+    dateToObject() {
+      return this.dateTo ? new Date(this.dateTo) : null;
     }
   },
   methods: {
diff --git a/app/views/my_modules/modals/_new_modal.html.erb b/app/views/my_modules/modals/_new_modal.html.erb
index e2cb55b24..70cca17c0 100644
--- a/app/views/my_modules/modals/_new_modal.html.erb
+++ b/app/views/my_modules/modals/_new_modal.html.erb
@@ -37,7 +37,7 @@
                   <label class="sci-label" for="my_module_due_date"><%= t('experiments.canvas.new_my_module_modal.due_date') %></label>
                   <div id="date-time-picker-my-module" class="vue-date-time-picker w-full" data-e2e="e2e-DP-canvas-newTaskModal-dueDate">
                     <input ref="input" type="hidden" data-simple-format="true"  class="calendar-input" id="date-time-picker-input" v-model="date" name="my_module[due_date]"  />
-                    <date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" placeholder="<%= t('experiments.canvas.new_my_module_modal.due_date_placeholder') %>" @change="updateDate" mode="datetime"></date-time-picker>
+                    <date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" value-type="stringWithoutTimezone" placeholder="<%= t('experiments.canvas.new_my_module_modal.due_date_placeholder') %>" @change="updateDate" mode="datetime"></date-time-picker>
                   </div>
                 </div>
               </div>