diff --git a/app/assets/javascripts/experiments/show.js b/app/assets/javascripts/experiments/show.js
index b6b482559..254dfdcf6 100644
--- a/app/assets/javascripts/experiments/show.js
+++ b/app/assets/javascripts/experiments/show.js
@@ -37,6 +37,7 @@
         // Add and show modal
         $(experimentWrapper).append($.parseHTML(result.html));
         $(newMyModuleModal).modal('show');
+        window.initDateTimePickerComponent(`#date-time-picker-my-module`);
         $(newMyModuleModal).find("input[type='text']").focus();
 
         // Remove modal when it gets closed
diff --git a/app/assets/javascripts/global_activities/side_pane.js b/app/assets/javascripts/global_activities/side_pane.js
index d741f6015..33486fe8a 100644
--- a/app/assets/javascripts/global_activities/side_pane.js
+++ b/app/assets/javascripts/global_activities/side_pane.js
@@ -26,13 +26,13 @@ var globalActivities = (function() {
   };
 
   function GlobalActivitiesFiltersGetDates() {
-    var fromDate = $('#calendar-from-date').data('DateTimePicker').date();
-    var toDate = $('#calendar-to-date').data('DateTimePicker').date();
+    var fromDate = $('#calendar-from-date').data('dateTimePicker').$refs.vueDateTime.datetime;
+    var toDate = $('#calendar-to-date').data('dateTimePicker').$refs.vueDateTime.datetime;
     if (fromDate) {
-      fromDate = fromDate._d.date_to_string();
+      fromDate = fromDate.date_to_string();
     }
     if (toDate) {
-      toDate = toDate._d.date_to_string();
+      toDate = toDate.date_to_string();
     }
     return { from: fromDate, to: toDate };
   }
@@ -108,8 +108,8 @@ var globalActivities = (function() {
 
     $('.date-selector .date.clear').click(() => {
       updateRunning = true;
-      $('#calendar-from-date').data('DateTimePicker').clear();
-      $('#calendar-to-date').data('DateTimePicker').clear();
+      $('#calendar-from-date').data('dateTimePicker').clearDate();
+      $('#calendar-to-date').data('dateTimePicker').clearDate();
       $('.ga-side .date-selector.filter-block')[0].dataset.periodSelect = '';
       resetHotButtonsBackgroundColor();
       updateRunning = false;
@@ -205,8 +205,8 @@ var globalActivities = (function() {
       var selectorsCount = $(projectFilter).length === 1 ? clearSelectors.length - 1 : 1;
       updateRunning = true;
 
-      $('#calendar-from-date').data('DateTimePicker').clear();
-      $('#calendar-to-date').data('DateTimePicker').clear();
+      $('#calendar-from-date').data('dateTimePicker').clearDate();
+      $('#calendar-to-date').data('dateTimePicker').clearDate();
       $('.ga-side .date-selector.filter-block')[0].dataset.periodSelect = '';
 
 
@@ -331,27 +331,18 @@ var globalActivities = (function() {
       });
     });
 
-    $('#calendar-to-date').on('dp.change', function(e) {
-      var dateContainer = $('.ga-side .date-selector.filter-block');
-      if (!updateRunning) {
-        $('#calendar-from-date').data('DateTimePicker').minDate(e.date);
-        dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val();
-        GlobalActivitiesUpdateTopPaneTags();
-        reloadActivities();
-        toggleClearButtons();
-        resetHotButtonsBackgroundColor();
-      }
-    });
-
-    $('#calendar-from-date').on('dp.change', function(e) {
-      var dateContainer = $('.ga-side .date-selector.filter-block');
-      if (!updateRunning) {
-        $('#calendar-to-date').data('DateTimePicker').maxDate(e.date);
-        dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val();
-        GlobalActivitiesUpdateTopPaneTags();
-        reloadActivities();
-        toggleClearButtons();
-        resetHotButtonsBackgroundColor();
+    $('.datetime-picker-container').on('dp:ready', function() {
+      $(this).find('.calendar-input').data('dateTimePicker').onChange = () => {
+        let dateContainer = $('.ga-side .date-selector.filter-block');
+        if (!updateRunning) {
+          let toDate = $('#calendar-to-date').data('dateTimePicker').$refs.vueDateTime.datetime;
+          let fromDate = $('#calendar-from-date').data('dateTimePicker').$refs.vueDateTime.datetime;
+          dateContainer[0].dataset.periodSelect = (toDate ? toDate?.date_to_string() : '') + ' - ' + (fromDate ? fromDate.date_to_string() : '');
+          GlobalActivitiesUpdateTopPaneTags();
+          reloadActivities();
+          toggleClearButtons();
+          resetHotButtonsBackgroundColor();
+        }
       }
     });
 
@@ -362,8 +353,8 @@ var globalActivities = (function() {
     $('.date-selector .hot-button').click(function() {
       var selectPeriod = this.dataset.period;
       var dateContainer = $('.ga-side .date-selector.filter-block');
-      var fromDate = $('#calendar-from-date').data('DateTimePicker');
-      var toDate = $('#calendar-to-date').data('DateTimePicker');
+      var fromDate = $('#calendar-from-date').data('dateTimePicker');
+      var toDate = $('#calendar-to-date').data('dateTimePicker');
       var today = new Date();
       var yesterday = new Date(new Date().setDate(today.getDate() - 1));
       var weekDay = today.getDay();
@@ -375,26 +366,24 @@ var globalActivities = (function() {
       var lastMonthEnd = new Date(new Date().setDate(firstDay.getDate() - 1));
       var lastMonthStart = new Date(lastMonthEnd.getFullYear(), lastMonthEnd.getMonth(), 1);
       updateRunning = true;
-      fromDate.minDate(new Date(1900, 1, 1));
-      toDate.maxDate(new Date(3000, 1, 1));
       if (selectPeriod === 'today') {
-        fromDate.date(today);
-        toDate.date(today);
+        fromDate.$refs.vueDateTime.datetime = today;
+        toDate.$refs.vueDateTime.datetime = today;
       } else if (selectPeriod === 'yesterday') {
-        fromDate.date(yesterday);
-        toDate.date(yesterday);
+        fromDate.$refs.vueDateTime.datetime = yesterday;
+        toDate.$refs.vueDateTime.datetime = yesterday;
       } else if (selectPeriod === 'this_week') {
-        fromDate.date(today);
-        toDate.date(monday);
+        fromDate.$refs.vueDateTime.datetime = today;
+        toDate.$refs.vueDateTime.datetime = monday;
       } else if (selectPeriod === 'last_week') {
-        fromDate.date(lastWeekEnd);
-        toDate.date(lastWeekStart);
+        fromDate.$refs.vueDateTime.datetime = lastWeekEnd;
+        toDate.$refs.vueDateTime.datetime = lastWeekStart;
       } else if (selectPeriod === 'this_month') {
-        fromDate.date(today);
-        toDate.date(firstDay);
+        fromDate.$refs.vueDateTime.datetime = today;
+        toDate.$refs.vueDateTime.datetime = firstDay;
       } else if (selectPeriod === 'last_month') {
-        fromDate.date(lastMonthEnd);
-        toDate.date(lastMonthStart);
+        fromDate.$refs.vueDateTime.datetime = lastMonthEnd;
+        toDate.$refs.vueDateTime.datetime = lastMonthStart;
       }
       updateRunning = false;
       dateContainer[0].dataset.periodSelect = this.innerHTML;
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 c36be5356..ad233b23a 100644
--- a/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
+++ b/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
@@ -25,6 +25,7 @@ var DateTimeHelper = (function() {
                 v-model="date"
                 id="datetimePicker${formId}${columnId}" />
           <date-time-picker class="w-full" @cleared="clearDate"
+                            :teleport="false"
                             ref="vueDateTime" @change="updateDate" mode="${mode}"
                             placeholder="${placeholder(mode)}"></date-time-picker>
         </div>
@@ -57,6 +58,7 @@ var DateTimeHelper = (function() {
                 v-model="date"
                 id="datetimeStartPicker${formId}${columnId}" />
           <date-time-picker class="w-full" @cleared="clearDate"
+                            :teleport="false"
                             ref="vueDateTime" @change="updateDate"
                             mode="${mode}" placeholder="${placeholder(mode)}"></date-time-picker>
         </div>
@@ -73,6 +75,7 @@ var DateTimeHelper = (function() {
                 v-model="date"
                 id="datetimeEndPicker${formId}${columnId}" />
           <date-time-picker class="w-full" @cleared="clearDate"
+                            :teleport="false"
                             ref="vueDateTime" @change="updateDate" mode="${mode}"
                             placeholder="${placeholder(mode)}"></date-time-picker>
         </div>
diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss
index 8ea425b8a..b5887b869 100644
--- a/app/assets/stylesheets/repositories.scss
+++ b/app/assets/stylesheets/repositories.scss
@@ -495,7 +495,7 @@
   }
 
   .repository-edit-overlay--pagination {
-    bottom: 0;
+    bottom: .5rem;
     height: 5em;
     line-height: 5em;
     padding: .5em;
diff --git a/app/javascript/vue/shared/date_time_picker.vue b/app/javascript/vue/shared/date_time_picker.vue
index 06c8e0c83..3fe9f5e9b 100644
--- a/app/javascript/vue/shared/date_time_picker.vue
+++ b/app/javascript/vue/shared/date_time_picker.vue
@@ -3,8 +3,9 @@
     <VueDatePicker
       v-if="mode == 'datetime'"
       v-model="datetime"
-      :teleport="true"
+      :teleport="teleport"
       text-input
+      :clearable="clearable"
       time-picker-inline
       :format="dateTimeFormat"
       :placeholder="placeholder" ></VueDatePicker>
@@ -12,7 +13,8 @@
     <VueDatePicker
       v-if="mode == 'date'"
       v-model="datetime"
-      :teleport="true"
+      :teleport="teleport"
+      :clearable="clearable"
       text-input
       :format="dateFormat"
       :enable-time-picker="false"
@@ -21,7 +23,8 @@
     <VueDatePicker
       v-if="mode == 'time'"
       v-model="time"
-      :teleport="true"
+      :teleport="teleport"
+      :clearable="clearable"
       text-input
       :format="timeFormat"
       time-picker
@@ -36,6 +39,8 @@
     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 }
     },
diff --git a/app/views/global_activities/_date_picker.html.erb b/app/views/global_activities/_date_picker.html.erb
index 12b5e376f..cf9431b5e 100644
--- a/app/views/global_activities/_date_picker.html.erb
+++ b/app/views/global_activities/_date_picker.html.erb
@@ -1,14 +1,12 @@
-<div class="datetime-picker-container"
-     id="<%= id %>"
-     data-id="<%= id %>"
-     data-use-current="<%= use_current %>"
-     data-datetime-picker-format="<%= datetime_picker_format_date_only %>">
-  <% if label %>
-    <label class="control-label required" for="calendar-<%= id %>"><%= label %></label>
-  <% end %>
-  <span class="sn-icon sn-icon-calendar"></span>
-  <input type="datetime" class="form-control calendar-input" name="calendar[<%= id %>]" id="calendar-<%= id %>" readonly="" data-ts="" placeholder="<%= placeholder %>" value="<%= defined?(setDate) ? setDate : '' %>"/>
-
-  <%= javascript_include_tag 'global_activities/date_picker' %>
-
+<div class="datetime-picker-container">
+  <div  id="date-time-picker-<%= id %>" class="vue-date-time-picker w-full">
+    <% selected_date = '' %>
+    <% selected_date = setDate if defined?(setDate) %>
+    <% selected_date = use_current %>
+    <% if label %>
+      <label class="sci-label" for="calendar-<%= id %>"><%= label %></label>
+    <% end %>
+    <input ref="input" type="hidden" class="calendar-input" id="calendar-<%= id %>" v-model="date" name="calendar[<%= id %>]" data-default="<%= defined?(setDate) ? setDate : '' %>" />
+    <date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" placeholder="<%= placeholder %>" @change="updateDate" mode="date"></date-time-picker>
+  </div>
 </div>
diff --git a/app/views/my_modules/modals/_new_modal.html.erb b/app/views/my_modules/modals/_new_modal.html.erb
index 83cf26280..406e1e814 100644
--- a/app/views/my_modules/modals/_new_modal.html.erb
+++ b/app/views/my_modules/modals/_new_modal.html.erb
@@ -11,8 +11,8 @@
           <%= f.hidden_field :view_mode, value: view_mode%>
           <div class="row">
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+              <label class="sci-label"><%= t('experiments.canvas.new_my_module_modal.name') %></label>
               <div class="sci-input-container form-group">
-                <label><%= t('experiments.canvas.new_my_module_modal.name') %></label>
                 <%= text_field_tag 'my_module[name]', '', placeholder: t('experiments.canvas.new_my_module_modal.name_placeholder'), class: "sci-input-field" %>
               </div>
             </div>
@@ -20,21 +20,12 @@
           <div class="row">
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               <div class="form-group">
-                <div class="sci-input-container right-icon my-module-due-date-container">
-                  <label for="my_module_due_date"><%= t('experiments.canvas.new_my_module_modal.due_date') %></label>
-                  <i class="sn-icon sn-icon-calendar"></i>
-                  <input id="my_module_due_date"
-                         type="datetime"
-                         name="my_module[due_date]"
-                         data-toggle='date-time-picker'
-                         class="sci-input-field calendar-input"
-                         readonly
-                         placeholder="<%= t('experiments.canvas.new_my_module_modal.due_date_placeholder') %>"
-                         data-date-format="<%= datetime_picker_format_full %>"
-                         data-date-locale="<%= I18n.locale %>"
-                         data-date-use-current="false"
-                         data-date-orientation="left"
-                         value=""/>
+                <div class="my-module-due-date-container">
+                  <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">
+                    <input ref="input" type="hidden" 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>
+                  </div>
                 </div>
               </div>
             </div>
@@ -44,7 +35,7 @@
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               <%= f.hidden_field :tag_ids%>
               <div class="form-group">
-                <label><%= t('experiments.canvas.new_my_module_modal.assigned_tags_label') %></label>
+                <label class="sci-label"><%= t('experiments.canvas.new_my_module_modal.assigned_tags_label') %></label>
                 <%= select_tag 'module-tags-selector', options_for_select([]),
                                       data: {
                                               'tags-create-url': project_create_tag_path(project_id: @experiment.project_id),
@@ -58,7 +49,7 @@
           <% if can_designate_users_to_new_task?(@experiment) %>
             <div class="row">
               <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-                <label><%= t('experiments.canvas.new_my_module_modal.assigned_users') %></label>
+                <label class="sci-label"><%= t('experiments.canvas.new_my_module_modal.assigned_users') %></label>
                 <%= select_tag 'my_module[user_ids]',
                               options_for_select(users.map{ |user|
                                 [