diff --git a/app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js b/app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js
index c06c95e9a..ba6135234 100644
--- a/app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js
+++ b/app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js
@@ -11,61 +11,46 @@ export default {
       return 'border-sn-light-grey hover:border-sn-sleepy-grey';
     },
     isEditable() {
-      return this.isEditing && this.editingField === this.dateType;
-    },
+      return this.isEditing && this.editingField === this.dateType
+    }
   },
   methods: {
     enableEdit() {
-      this.isEditing = true;
-      this.$emit('setEditingField', this.dateType);
+      this.isEditing = true
+      this.$emit('setEditingField', this.dateType)
     },
     saveChange() {
-      if (
-        !this.isEditing
-        || this.isSaving
-        || !this.params
-        || (this.params && !Object.keys(this.params).includes(this.colId?.toString()))
-      ) {
-        Object.assign(this.$data, {
-          isEditing: false,
-          isSaving: false,
-          errorMessage: null,
-        });
+      if (!this.isEditing ||
+          this.isSaving ||
+          !this.params ||
+          (this.params && !Object.keys(this.params).includes(this.colId?.toString()))) {
+        Object.assign(this.$data, { isEditing: false, isSaving: false, errorMessage: null });
         return;
-      }
+      };
 
       // Don't submit unless values changed
       switch (true) {
         case ['date', 'dateTime', 'time'].includes(this.dateType):
-          if (this.equalDates(this.params[this.colId], this.initDate)) {
+          if(this.equalDates(this.params[this.colId], this.initDate)) {
             Object.assign(this.$data, { isEditing: false, isSaving: false });
             return;
           }
-          if (
-            this.dateType === 'time'
-            && this.equalTimes(this.params[this.colId], this.initDate)
-          ) {
+          if(this.dateType === 'time' && this.equalTimes(this.params[this.colId], this.initDate)) {
             Object.assign(this.$data, { isEditing: false, isSaving: false });
             return;
           }
-          break;
         case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
-          if (
-            this.equalDates(this.timeFrom?.datetime, this.initStartDate)
-            && this.equalDates(this.timeTo?.datetime, this.initEndDate)
-          ) {
+          if (this.equalDates(this.timeFrom?.datetime, this.initStartDate) &&
+              this.equalDates(this.timeTo?.datetime, this.initEndDate)) {
             Object.assign(this.$data, { isEditing: false, isSaving: false });
             return;
           }
-          if (
-            this.dateType === 'timeRange'
-            && this.equalTimes(this.timeFrom?.datetime, this.initStartDate)
-            && this.equalTimes(this.timeTo?.datetime, this.initEndDate)
-          ) {
+          if (this.dateType === 'timeRange' &&
+              this.equalTimes(this.timeFrom?.datetime, this.initStartDate) &&
+              this.equalTimes(this.timeTo?.datetime, this.initEndDate)) {
             Object.assign(this.$data, { isEditing: false, isSaving: false });
             return;
           }
-          break;
         default:
           break;
       }
@@ -80,34 +65,28 @@ export default {
           const cellValue = result?.value;
           switch (true) {
             case ['date', 'dateTime', 'time'].includes(this.dateType):
-              this.values = cellValue;
-              this.initDate = cellValue?.datetime;
-              break;
+              this.values = cellValue
+              this.initDate = cellValue?.datetime
             case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
               this.initStartDate = cellValue?.start_time?.datetime;
               this.initEndDate = cellValue?.end_time?.datetime;
-              break;
             default:
               break;
           }
-          Object.assign($this.$data, {
-            isEditing: false,
-            isSaving: false,
-            values: result?.value,
-          });
+          Object.assign($this.$data, { isEditing: false, isSaving: false, values: result?.value });
           if ($('.dataTable')[0]) $('.dataTable').DataTable().ajax.reload(null, false);
-        },
+        }
       });
     },
     setParams() {
-      const defaultParams = this.params ? this.params : { [this.colId]: {} };
+      let defaultParams = this.params ? this.params : { [this.colId]: {} };
       switch (true) {
         case ['date', 'dateTime', 'time'].includes(this.dateType):
           defaultParams[this.colId] = this.values?.datetime;
           break;
         case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
-          defaultParams[this.colId].start_time = this.timeFrom?.datetime;
-          defaultParams[this.colId].end_time = this.timeTo?.datetime;
+          defaultParams[this.colId]['start_time'] = this.timeFrom?.datetime;
+          defaultParams[this.colId]['end_time'] = this.timeTo?.datetime;
           break;
         default:
           break;
@@ -115,23 +94,21 @@ export default {
       this.params = defaultParams;
     },
     formatDateTime(date, field = null) {
-      this.values = this.values ? this.values : { [this.colId]: {} };
-      const params = this.params && this.params[this.colId]
-        ? this.params
-        : { [this.colId]: {} };
-      const timeFrom = this.timeFrom || {};
-      const timeTo = this.timeTo || {};
+      this.values = this.values ? this.values : { [this.colId]: {} }
+      let params = this.params && this.params[this.colId] ? this.params : { [this.colId]: {} };
+      let timeFrom = this.timeFrom || {};
+      let timeTo = this.timeTo || {};
       switch (true) {
         case ['date', 'dateTime', 'time'].includes(this.dateType):
           params[this.colId] = date;
-          this.values.datetime = date;
+          this.values['datetime'] = date;
           break;
         case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
           if (field === 'start_time') {
-            timeFrom.datetime = date;
+            timeFrom['datetime'] = date;
           }
-          if (field === 'end_time') {
-            timeTo.datetime = date;
+          if (field === 'end_time'){
+            timeTo['datetime'] = date;
           }
           params[this.colId][field] = date;
           break;
@@ -144,30 +121,22 @@ export default {
     },
     dateValue(date) {
       const typesThatCantBeEmpty = ['dateRange', 'dateTimeRange'];
-      if (
-        date
-        && date.currentTarget === null
-        && typesThatCantBeEmpty.includes(this.dateType)
-      ) {
+      if (date && (date.currentTarget === null) && typesThatCantBeEmpty.includes(this.dateType)) {
         this.errorMessage = I18n.t('repositories.item_card.date_time.errors.select_valid_value');
-        return null;
+        return;
       }
-      if (date) return new Date(date);
-      return null;
+      if(date) return new Date(date)
+      return new Date()
     },
-    hasMonthText() {
-      $('body')
-        .data('datetime-picker-format')
-        ?.match(/MMM/);
+    hasMonthText(){
+      $('body').data('datetime-picker-format')?.match(/MMM/)
     },
-    equalDates(date1, date2) {
+    equalDates(date1, date2){
       return new Date(date1).getTime() === new Date(date2).getTime();
     },
-    equalTimes(date1, date2) {
-      return (
-        new Date(date1).getHours() === new Date(date2).getHours()
-        && new Date(date1).getMinutes() === new Date(date2).getMinutes()
-      );
+    equalTimes(date1, date2){
+      return new Date(date1).getHours() === new Date(date2).getHours() &&
+              new Date(date1).getMinutes() == new Date(date2).getMinutes()
     },
     validateAndSave() {
       this.errorMessage = null;
@@ -176,38 +145,28 @@ export default {
           // To do
           break;
         case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
-          if (!this.params?.[this.colId]) return;
-
-          // start_time and end_time must be both present or both absent
-          if (
-            !!this.params[this.colId]?.start_time?.getTime?.()
-            ^ !!this.params[this.colId]?.end_time?.getTime?.()
-          ) {
-            this.errorMessage = I18n.t('repositories.item_card.date_time.errors.not_valid_range');
-            return;
-          }
-
-          // start_time should always be lesser then end_time
-          if (
-            this.params[this.colId]?.start_time?.getTime?.()
-            && this.params[this.colId].start_time.getTime() > this.params[this.colId].end_time.getTime()
-          ) {
-            this.errorMessage = I18n.t('repositories.item_card.date_time.errors.not_valid_range');
-            return;
-          }
-
-          // start_time and end_time both are absent
-          if (
-            !this.params[this.colId]?.start_time
-            && !this.params[this.colId]?.end_time
-          ) {
-            this.params = { [this.colId]: null };
+          if(this.params && this.params[this.colId]) {
+            if((!this.params[this.colId].start_time && this.params[this.colId].end_time) ||
+              (this.params[this.colId].start_time && !this.params[this.colId].end_time)) {
+              this.errorMessage = I18n.t('repositories.item_card.date_time.errors.not_valid_range');
+              return;
+            }
+            if (this.params[this.colId].start_time && this.params[this.colId].end_time &&
+                this.params[this.colId].start_time.getTime() && this.params[this.colId].end_time.getTime()) {
+              if(this.params[this.colId].start_time.getTime() > this.params[this.colId].end_time.getTime()) {
+                this.errorMessage = I18n.t('repositories.item_card.date_time.errors.not_valid_range');
+                return
+              }
+            }
+            if (!this.params[this.colId].start_time && !this.params[this.colId].end_time) {
+              this.params = { [this.colId]: null }
+            }
           }
           break;
         default:
           break;
       }
       this.saveChange();
-    },
+    }
   },
 };
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue b/app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue
index 07edfb9dd..50b5284ca 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue
@@ -1,385 +1,297 @@
 <template>
   <div>
-    <div
-      ref="dateTimeRangeOverlay"
-      class="fixed top-0 left-0 right-0 bottom-0 bg-transparent z-[999] hidden"
-    ></div>
+    <div ref="dateTimeRangeOverlay"
+         class="fixed top-0 left-0 right-0 bottom-0 bg-transparent z-[999] hidden">
+    </div>
     <div
       @click="enableEdit"
       v-click-outside="validateAndSave"
-      class="text-sn-dark-grey font-inter text-sm font-normal leading-5 w-full rounded relative !px-2 !py-0
-             min-h-[32px] flex items-center
-             [&_.dp\_\_input]:border-0 [&_.dp\_\_input]:p-0"
+      class="text-sn-dark-grey font-inter text-sm font-normal leading-5 w-full rounded relative"
       :class="editableClassName"
     >
-      <template v-if="dateType === 'date'">
-        <div
-          v-if="isEditing || values?.datetime"
-          ref="edit"
-          class="[&_.dp\_\_input]:!w-20"
-        >
+      <!-- DATE -->
+      <div v-if="dateType === 'date'">
+        <div v-if="isEditing || values?.datetime" ref="edit">
           <DateTimePicker
-            :mode="'date'"
             :disabled="!canEdit"
             @change="formatDateTime($event)"
-            @open="enableEdit"
-            @close="validateAndSave"
-            :inputIconHidden="true"
-            inputClassName="sci-cursor-edit"
             :selectorId="`DatePicker${colId}`"
+            :dateOnly="true"
             :defaultValue="dateValue(values?.datetime)"
-            :placeholder="
-              i18n.t('repositories.item_card.repository_date_value.placeholder')
-            "
+            :standAlone="true"
           />
         </div>
-        <div
-          v-else
-          ref="view"
-          :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
-        >
-          {{
-            i18n.t(
-              `repositories.item_card.repository_date_value.${
-                canEdit ? "placeholder" : "no_date"
-              }`
-            )
-          }}
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
+          {{ i18n.t(`repositories.item_card.repository_date_value.${canEdit ? 'placeholder' : 'no_date'}`) }}
         </div>
-      </template>
-      <template v-else-if="dateType === 'dateRange'">
-        <div
-          v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)"
-          ref="edit"
-          class="w-full flex align-center [&_.dp\_\_input]:!w-20"
-        >
+      </div>
+
+      <!-- DATE RANGE -->
+      <div v-else-if="dateType === 'dateRange'">
+        <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex align-center">
           <div>
             <DateTimePicker
-              :mode="'date'"
               :disabled="!canEdit"
               @change="formatDateTime($event, 'start_time')"
-              @open="enableEdit"
-              @close="validateAndSave"
-              :inputIconHidden="true"
-              inputClassName="sci-cursor-edit"
               :selectorId="`DatePickerStart${colId}`"
+              :dateOnly="true"
               :defaultValue="dateValue(timeFrom?.datetime)"
-              :placeholder="
-                i18n.t(
-                  'repositories.item_card.repository_date_range_value.placeholder'
-                )
-              "
+              :standAlone="true"
+              :dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
             />
           </div>
-          <span class="flex items-center mx-1">-</span>
+          <span class="mr-3">-</span>
           <div>
             <DateTimePicker
-              :mode="'date'"
               :disabled="!canEdit"
               @change="formatDateTime($event, 'end_time')"
-              @open="enableEdit"
-              @close="validateAndSave"
-              :inputIconHidden="true"
-              inputClassName="sci-cursor-edit"
               :selectorId="`DatePickerEnd${colId}`"
+              :dateOnly="true"
               :defaultValue="dateValue(timeTo?.datetime)"
-              :placeholder="
-                i18n.t(
-                  'repositories.item_card.repository_date_range_value.placeholder'
-                )
-              "
+              :standAlone="true"
+              :dateClassName="hasMonthText() ? 'w-[135px]' : 'ml-2 w-[90px]'"
             />
           </div>
         </div>
-        <div
-          v-else
-          ref="view"
-          :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
-        >
-          {{
-            i18n.t(
-              `repositories.item_card.repository_date_range_value.${
-                canEdit ? "placeholder" : "no_date_range"
-              }`
-            )
-          }}
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
+          {{ i18n.t(`repositories.item_card.repository_date_range_value.${canEdit ? 'placeholder' : 'no_date_range'}`) }}
         </div>
-      </template>
-      <template v-if="dateType === 'dateTime'">
-        <div
-          v-if="isEditing || values?.datetime"
-          ref="edit"
-          class="w-full [&_.dp\_\_input]:!w-[7.125rem]"
-        >
+      </div>
+
+      <!-- DATE-TIME -->
+      <div v-if="dateType === 'dateTime'">
+        <div v-if="isEditing || values?.datetime" ref="edit" class="w-full">
           <DateTimePicker
-            :mode="'datetime'"
             :disabled="!canEdit"
             @change="formatDateTime"
-            @open="enableEdit"
-            @close="validateAndSave"
-            :inputIconHidden="true"
-            inputClassName="sci-cursor-edit"
             :selectorId="`DatePicker${colId}`"
             :defaultValue="dateValue(values?.datetime)"
-            :placeholder="
-              i18n.t(
-                'repositories.item_card.repository_date_time_value.placeholder'
-              )
-            "
+            :standAlone="true"
+            :dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
+            timeClassName="w-11"
           />
         </div>
-        <div
-          v-else
-          ref="view"
-          :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
-        >
-          {{
-            i18n.t(
-              `repositories.item_card.repository_date_time_value.${
-                canEdit ? "placeholder" : "no_date_time"
-              }`
-            )
-          }}
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
+          {{ i18n.t(`repositories.item_card.repository_date_time_value.${canEdit ? 'placeholder' : 'no_date_time'}`) }}
         </div>
-      </template>
-      <template v-else-if="dateType === 'dateTimeRange'">
-        <div
-          v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)"
-          ref="edit"
-          class="w-full flex [&_.dp\_\_input]:!w-[7.125rem]"
-        >
+      </div>
+
+      <!-- DATE-TIME RANGE -->
+      <div v-else-if="dateType === 'dateTimeRange'">
+        <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
           <div>
             <DateTimePicker
-              :mode="'datetime'"
               :disabled="!canEdit"
               @change="formatDateTime($event, 'start_time')"
-              @open="enableEdit"
-              @close="validateAndSave"
-              :inputIconHidden="true"
-              inputClassName="sci-cursor-edit"
               :selectorId="`DatePickerStart${colId}`"
               :defaultValue="dateValue(timeFrom?.datetime)"
               :timeOnly="false"
               :dateOnly="false"
-              :placeholder="
-                i18n.t(
-                  'repositories.item_card.repository_date_time_range_value.placeholder'
-                )
-              "
+              :standAlone="true"
+              :dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
+              timeClassName="w-11"
             />
           </div>
-          <span class="flex items-center mx-1">-</span>
+          <span class="mx-1">-</span>
           <div>
             <DateTimePicker
-              :mode="'datetime'"
               :disabled="!canEdit"
               @change="formatDateTime($event, 'end_time')"
-              @open="enableEdit"
-              @close="validateAndSave"
-              :inputIconHidden="true"
-              inputClassName="sci-cursor-edit"
               :selectorId="`DatePickerEnd${colId}`"
               :defaultValue="dateValue(timeTo?.datetime)"
               :timeOnly="false"
               :dateOnly="false"
-              :placeholder="
-                i18n.t(
-                  'repositories.item_card.repository_date_time_range_value.placeholder'
-                )
-              "
+              :standAlone="true"
+              :dateClassName="hasMonthText() ? 'w-[135px]' : 'ml-2 w-[90px]'"
+              timeClassName="w-11"
             />
           </div>
         </div>
-        <div
-          v-else
-          ref="view"
-          :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
-        >
-          {{
-            i18n.t(
-              `repositories.item_card.repository_date_time_range_value.${
-                canEdit ? "placeholder" : "no_date_time_range"
-              }`
-            )
-          }}
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
+          {{ i18n.t(`repositories.item_card.repository_date_time_range_value.${canEdit ? 'placeholder' : 'no_date_time_range'}`) }}
         </div>
-      </template>
-      <template v-else-if="dateType === 'time'">
-        <div
-          v-if="isEditing || values?.datetime"
-          ref="edit"
-          class="[&_.dp\_\_input]:!w-10"
-        >
+      </div>
+
+      <!-- TIME -->
+      <div v-else-if="dateType === 'time'">
+        <div v-if="isEditing || values?.datetime" ref="edit">
           <DateTimePicker
-            :mode="'time'"
             :disabled="!canEdit"
             @change="formatDateTime"
-            @open="enableEdit"
-            @close="validateAndSave"
-            :inputIconHidden="true"
-            inputClassName="sci-cursor-edit"
             :selectorId="`DatePicker${colId}`"
+            :timeOnly="true"
             :defaultValue="dateValue(values?.datetime)"
-            :placeholder="
-              i18n.t('repositories.item_card.repository_time_value.placeholder')
-            "
+            :standAlone="true"
+            timeClassName="w-11"
           />
         </div>
-        <div
-          v-else
-          ref="view"
-          :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
-        >
-          {{
-            i18n.t(
-              `repositories.item_card.repository_time_value.${
-                canEdit ? "placeholder" : "no_time"
-              }`
-            )
-          }}
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
+          {{ i18n.t(`repositories.item_card.repository_time_value.${ canEdit ? 'placeholder' : 'no_time'}`) }}
         </div>
-      </template>
-      <template v-else-if="dateType === 'timeRange'">
-        <div
-          v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)"
-          ref="edit"
-          class="w-full flex [&_.dp\_\_input]:!w-10"
-        >
+      </div>
+
+      <!-- TIME RANGE -->
+      <div v-else-if="dateType === 'timeRange'">
+        <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
           <div>
             <DateTimePicker
-              :mode="'time'"
               :disabled="!canEdit"
               @change="formatDateTime($event, 'start_time')"
-              @open="enableEdit"
-              @close="validateAndSave"
-              :inputIconHidden="true"
-              inputClassName="sci-cursor-edit"
               :selectorId="`DatePickerStart${colId}`"
+              :timeOnly="true"
               :defaultValue="dateValue(timeFrom?.datetime)"
-              :placeholder="
-                i18n.t(
-                  'repositories.item_card.repository_time_range_value.placeholder'
-                )
-              "
+              :standAlone="true"
+              timeClassName="w-11"
             />
           </div>
-          <span class="flex items-center mx-1">-</span>
+          <span class="mx-1">-</span>
           <div>
             <DateTimePicker
-              :mode="'time'"
               :disabled="!canEdit"
               @change="formatDateTime($event, 'end_time')"
-              @open="enableEdit"
-              @close="validateAndSave"
-              :inputIconHidden="true"
-              inputClassName="sci-cursor-edit"
               :selectorId="`DatePickerEnd${colId}`"
+              :timeOnly="true"
               :defaultValue="dateValue(timeTo?.datetime)"
-              :placeholder="
-                i18n.t(
-                  'repositories.item_card.repository_time_range_value.placeholder'
-                )
-              "
+              :standAlone="true"
+              timeClassName="ml-2 w-11"
             />
           </div>
         </div>
-        <div
-          v-else
-          ref="view"
-          :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
-        >
-          {{
-            i18n.t(
-              `repositories.item_card.repository_time_range_value.${
-                canEdit ? "placeholder" : "no_time_range"
-              }`
-            )
-          }}
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
+          {{ i18n.t(`repositories.item_card.repository_time_range_value.${canEdit ? 'placeholder' : 'no_time_range'}`) }}
         </div>
-      </template>
+      </div>
       <span class="absolute right-2 top-1.5" v-if="values?.reminder">
         <Reminder :value="values" />
       </span>
     </div>
-    <div
-      class="text-sn-delete-red text-xs w-full "
-      :class="{ visible: errorMessage, invisible: !errorMessage }"
-    >
+    <div class="text-sn-delete-red text-xs w-full " :class="{ visible: errorMessage, invisible: !errorMessage }">
       {{ errorMessage }}
     </div>
   </div>
 </template>
 
 <script>
-import { vOnClickOutside } from '@vueuse/components';
-import dateTimeRange from '../mixins/date_time_range';
-import DateTimePicker from '../../shared/date_time_picker.vue';
-import Reminder from '../reminder.vue';
+  import { vOnClickOutside } from '@vueuse/components'
+  import date_time_range from './../mixins/date_time_range';
+  import DateTimePicker from '../../shared/date_time_picker.vue';
+  import Reminder from './../reminder.vue';
 
-export default {
-  name: 'DateTimeRange',
-  mixins: [dateTimeRange],
-  components: {
-    DateTimePicker,
-    Reminder,
-  },
-  directives: {
-    'click-outside': vOnClickOutside,
-  },
-  data() {
-    return {
-      values: {},
-      errorMessage: null,
-      params: null,
-      cellUpdatePath: null,
-      timeFrom: null,
-      timeTo: null,
-      isEditing: false,
-      initValue: null,
-      initStartDate: null,
-      initEndDate: null,
-    };
-  },
-  props: {
-    dateType: String,
-    colVal: null,
-    colId: null,
-    updatePath: null,
-    startTime: null,
-    endTime: null,
-    editingField: false,
-    canEdit: { type: Boolean, default: false },
-  },
-  computed: {
-    editableClassName() {
-      const className = 'border-solid border-[1px] py-2 px-3 sci-cursor-edit';
-      if (this.canEdit && this.errorMessage) return `${className} border-sn-delete-red`;
-      if (this.canEdit && this.isEditing) return `${className} border-sn-science-blue`;
-      if (this.canEdit) return `${className} border-sn-light-grey hover:border-sn-sleepy-grey`;
-      return '';
+  export default {
+    name: 'DateTimeRange',
+    mixins: [date_time_range],
+    components: {
+      DateTimePicker,
+      Reminder
     },
-  },
-  mounted() {
-    this.cellUpdatePath = this.updatePath;
-    this.values = this.colVal || {};
-    this.timeFrom = this.startTime;
-    this.timeTo = this.endTime;
-    this.errorMessage = null;
-    this.setParams();
-    this.initDate = this.colVal?.datetime;
-    this.initStartDate = this.startTime?.datetime;
-    this.initEndDate = this.endTime?.datetime;
-  },
-  watch: {
-    isEditing(newValue) {
-      if (!newValue) return;
-      // Focus input field to open date picker
-      this.$nextTick(() => {
-        $(this.$refs.edit)
-          ?.find('input')[0]
-          ?.focus();
-      });
+    directives: {
+      'click-outside': vOnClickOutside
+    },
+    data() {
+      return {
+        values: {},
+        errorMessage: null,
+        params: null,
+        cellUpdatePath: null,
+        timeFrom: null,
+        timeTo: null,
+        isEditing: false,
+        initValue: null,
+        initStartDate: null,
+        initEndDate: null
+      }
+    },
+    props: {
+      dateType: String,
+      colVal: null,
+      colId: null,
+      updatePath: null,
+      startTime: null,
+      endTime: null,
+      editingField: false,
+      canEdit: { type: Boolean, default: false }
+
+    },
+    computed: {
+      editableClassName() {
+        const className = 'border-solid border-[1px] py-2 px-3 sci-cursor-edit'
+        if (this.canEdit && this.errorMessage) return `${className} border-sn-delete-red`;
+        if (this.canEdit && this.isEditing) return `${className} border-sn-science-blue`;
+        if (this.canEdit) return `${className} border-sn-light-grey hover:border-sn-sleepy-grey`;
+        return ''
+      }
+    },
+    methods: {
+      showOverlay() {
+        const overlay = this.$refs.dateTimeRangeOverlay;
+        overlay.classList.remove('hidden');
+      },
+      hideOverlay() {
+        const overlay = this.$refs.dateTimeRangeOverlay;
+        overlay.classList.add('hidden');
+      },
+      bringCalendarToFront() {
+        const calendarEl = document.querySelector('.dp__instance_calendar');
+        calendarEl.classList.add('z-[9999]');
+      },
+      preventBodyScrolling() {
+        document.body.classList.add('overflow-hidden');
+        document.body.classList.remove('overflow-auto');
+      },
+      allowBodyScrolling() {
+        document.body.classList.remove('overflow-hidden');
+        document.body.classList.add('overflow-auto');
+      },
+      focusClearedInput() {
+        const firstInput = $(this.$refs.edit)?.find('input')[0];
+        const secondInput = $(this.$refs.edit)?.find('input')[1];
+
+        // first is empty
+        if (!firstInput.value) {
+          firstInput.focus();
+          firstInput.click();
+        }
+        // second is empty
+        if (!secondInput.value) {
+          secondInput.focus();
+          secondInput.click();
+        }
+
+        this.preventBodyScrolling();
+        this.showOverlay();
+        this.bringCalendarToFront();
+      },
+    },
+    mounted() {
+      this.cellUpdatePath = this.updatePath;
+      this.values = this.colVal || {};
+      this.timeFrom = this.startTime
+      this.timeTo = this.endTime
+      this.errorMessage = null;
+      this.setParams();
+      this.initDate = this.colVal?.datetime;
+      this.initStartDate = this.startTime?.datetime;
+      this.initEndDate = this.endTime?.datetime;
+    },
+    watch: {
+      isEditing(newValue) {
+        if (!newValue) return;
+        // Focus input field to open date picker
+        this.$nextTick(() => {
+          $(this.$refs.edit)?.find('input')[0]?.focus();
+        })
+      },
+      errorMessage(newVal) {
+        if (newVal !== null) {
+          this.$nextTick(() => {
+            this.focusClearedInput();
+          });
+        }
+        if (newVal === null) {
+          this.hideOverlay();
+          this.allowBodyScrolling();
+        }
+      },
     }
   }
-};
 </script>
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue b/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue
index 480080f38..2db7a371f 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue
@@ -42,6 +42,7 @@ export default {
   },
 
   mounted() {
+    console.log('mounted');
     window.addEventListener('resize', this.handleResize);
     this.initializeComponent();
     this.$nextTick(() => {
diff --git a/app/javascript/vue/shared/date_time_picker.vue b/app/javascript/vue/shared/date_time_picker.vue
index 2abf27797..418d8b42d 100644
--- a/app/javascript/vue/shared/date_time_picker.vue
+++ b/app/javascript/vue/shared/date_time_picker.vue
@@ -18,10 +18,6 @@
       week-start="0"
       :enable-time-picker="mode == 'datetime'"
       :time-picker="mode == 'time'"
-      :hide-input-icon="inputIconHidden"
-      :input-class-name="inputClassName"
-      @open="this.$emit('open')"
-      @close="this.$emit('close')"
       :placeholder="placeholder" >
         <template #arrow-right>
             <img class="slot-icon" src="/images/calendar/navigate_next.svg"/>
@@ -52,141 +48,144 @@
 </template>
 
 <script>
-import VueDatePicker from '@vuepic/vue-datepicker';
+  import VueDatePicker from '@vuepic/vue-datepicker';
 
-export default {
-  name: 'DateTimePicker',
-  props: {
-    mode: { type: String, default: 'datetime' },
-    clearable: { type: Boolean, default: false },
-    teleport: { type: Boolean, default: true },
-    defaultValue: { type: Date, required: false },
-    placeholder: { type: String },
-    inputIconHidden: { type: Boolean, default: false },
-    inputClassName: { type: String, default: null },
-    disabled: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      manualUpdate: false,
-      datetime: this.defaultValue,
-      time: null,
-      markers: [
-        {
-          date: new Date(),
-          type: 'dot',
-          color: '#3B99FD',
-        },
-      ],
-    };
-  },
-  created() {
-    if (this.defaultValue) {
-      this.time = {
-        hours: this.defaultValue.getHours(),
-        minutes: this.defaultValue.getMinutes(),
-      };
-    }
-  },
-  components: {
-    VueDatePicker,
-  },
-  watch: {
-    defaultValue() {
-      this.datetime = this.defaultValue;
+  export default {
+    name: 'DateTimePicker',
+    props: {
+      mode: { type: String, default: 'datetime' },
+      clearable: { type: Boolean, default: false },
+      teleport: { type: Boolean, default: true },
+      defaultValue: { type: Date, required: false },
+      placeholder: { type: String },
+      standAlone: { type: Boolean, default: false, required: false },
+      dateClassName: { type: String, default: '' },
+      timeClassName: { type: String, default: '' },
+      disabled: { type: Boolean, default: false }
+    },
+    data() {
+      return {
+        manualUpdate: false,
+        datetime: this.defaultValue,
+        time: null,
+        markers: [
+          {
+            date: new Date(),
+            type: 'dot',
+            color: '#3B99FD',
+          },
+        ]
+      }
+    },
+    created() {
       if (this.defaultValue) {
         this.time = {
-          hours: this.defaultValue.getHours(),
-          minutes: this.defaultValue.getMinutes(),
-        };
+                      hours: this.defaultValue.getHours(),
+                      minutes:this.defaultValue.getMinutes(),
+                    }
       }
     },
-    datetime() {
-      if (this.mode === 'time') {
-        this.time = null;
+    components: {
+      VueDatePicker
+    },
+    watch: {
+      defaultValue: function () {
+        this.datetime = this.defaultValue;
+        if (this.defaultValue) {
+          this.time = {
+            hours: this.defaultValue.getHours(),
+            minutes: this.defaultValue.getMinutes()
+          }
+        }
+      },
+      datetime: function () {
+        if (this.mode == 'time') {
 
-        if (this.datetime) {
+          this.time = null;
+
+          if (this.datetime) {
           this.time = {
             hours: this.datetime.getHours(),
-            minutes: this.datetime.getMinutes(),
-          };
+            minutes: this.datetime.getMinutes()
+          }
         }
 
-        return;
-      }
-
-      if (this.manualUpdate) {
-        this.manualUpdate = false;
-        return;
-      }
-
-      if (this.datetime === null) {
-        this.$emit('cleared');
-      }
-
-      if (this.defaultValue !== this.datetime) {
-        this.$emit('change', this.datetime);
-      }
-    },
-    time() {
-      if (this.manualUpdate) {
-        this.manualUpdate = false;
-        return;
-      }
-
-      if (this.mode !== 'time') return;
-
-      let newDate;
-
-      if (this.time) {
-        newDate = new Date();
-        newDate.setHours(this.time.hours);
-        newDate.setMinutes(this.time.minutes);
-      } else {
-        newDate = {
-          hours: null,
-          minutes: null,
-        };
-        this.$emit('cleared');
-      }
-
-      if (this.defaultValue !== newDate) {
-        this.$emit('change', newDate);
-      }
-    },
-  },
-  computed: {
-    compDatetime: {
-      get() {
-        if (this.mode === 'time') {
-          return this.time;
+          return
+        }
+
+        if (this.manualUpdate) {
+          this.manualUpdate = false;
+          return;
+        }
+
+        if ( this.datetime == null) {
+          this.$emit('cleared');
+        }
+
+        if (this.defaultValue != this.datetime) {
+          this.$emit('change', this.datetime);
         }
-        return this.datetime;
       },
-      set(val) {
-        if (this.mode === 'time') {
-          this.time = val;
+      time: function () {
+        if (this.manualUpdate) {
+          this.manualUpdate = false;
+          return;
+        }
+
+        if (this.mode != 'time') return;
+
+        let newDate;
+
+        if (this.time) {
+          newDate = new Date();
+          newDate.setHours(this.time.hours);
+          newDate.setMinutes(this.time.minutes);
         } else {
-          this.datetime = val;
+          newDate = {
+            hours: null,
+            minutes: null
+          };
+          this.$emit('cleared');
+        }
+
+        if (this.defaultValue != newDate) {
+          this.$emit('change', newDate);
+        }
+      }
+    },
+    computed: {
+      compDatetime: {
+        get () {
+          if (this.mode == 'time') {
+            return this.time
+          } else {
+            return this.datetime
+          }
+        },
+        set (val) {
+          if (this.mode == 'time') {
+            this.time = val
+          } else {
+            this.datetime = val
+          }
         }
       },
+      format() {
+        if (this.mode == 'time') return 'HH:mm'
+        if (this.mode == 'date') return document.body.dataset.datetimePickerFormatVue
+        return `${document.body.dataset.datetimePickerFormatVue} HH:mm`
+      }
     },
-    format() {
-      if (this.mode === 'time') return 'HH:mm';
-      if (this.mode === 'date') return document.body.dataset.datetimePickerFormatVue;
-      return `${document.body.dataset.datetimePickerFormatVue} HH:mm`;
+    mounted() {
+      window.addEventListener('resize', this.close);
     },
-  },
-  mounted() {
-    window.addEventListener('resize', this.close);
-  },
-  unmounted() {
-    window.removeEventListener('resize', this.close);
-  },
-  methods: {
-    close() {
-      this.$refs.datetimePicker.closeMenu();
+    unmounted() {
+      window.removeEventListener('resize', this.close);
     },
-  },
-};
+    methods: {
+      close() {
+        this.$refs.datetimePicker.closeMenu();
+      },
+    }
+  }
 </script>