diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js
index 4469e221e..49e9b3c51 100644
--- a/client/components/cards/cardCustomFields.js
+++ b/client/components/cards/cardCustomFields.js
@@ -1,3 +1,7 @@
+import { DatePicker } from '/client/lib/datepicker';
+import moment from 'moment';
+import Cards from '/models/cards';
+
 Template.cardCustomFieldsPopup.helpers({
   hasCustomField() {
     const card = Cards.findOne(Session.get('currentCard'));
diff --git a/client/components/cards/cardDate.js b/client/components/cards/cardDate.js
index 250ad0aa7..cb4a2724d 100644
--- a/client/components/cards/cardDate.js
+++ b/client/components/cards/cardDate.js
@@ -1,122 +1,5 @@
-// Helper function to replace HH with H for 24 hours format, because H allows also single-digit hours
-function adjustedTimeFormat() {
-  return moment
-    .localeData()
-    .longDateFormat('LT')
-    .replace(/HH/i, 'H');
-}
-
-// Edit received, start, due & end dates
-BlazeComponent.extendComponent({
-  template() {
-    return 'editCardDate';
-  },
-
-  onCreated() {
-    this.error = new ReactiveVar('');
-    this.card = this.data();
-    this.date = new ReactiveVar(moment.invalid());
-  },
-
-  onRendered() {
-    const $picker = this.$('.js-datepicker')
-      .datepicker({
-        todayHighlight: true,
-        todayBtn: 'linked',
-        language: TAPi18n.getLanguage(),
-      })
-      .on(
-        'changeDate',
-        function(evt) {
-          this.find('#date').value = moment(evt.date).format('L');
-          this.error.set('');
-          this.find('#time').focus();
-        }.bind(this),
-      );
-
-    if (this.date.get().isValid()) {
-      $picker.datepicker('update', this.date.get().toDate());
-    }
-  },
-
-  showDate() {
-    if (this.date.get().isValid()) return this.date.get().format('L');
-    return '';
-  },
-  showTime() {
-    if (this.date.get().isValid()) return this.date.get().format('LT');
-    return '';
-  },
-  dateFormat() {
-    return moment.localeData().longDateFormat('L');
-  },
-  timeFormat() {
-    return moment.localeData().longDateFormat('LT');
-  },
-
-  events() {
-    return [
-      {
-        'keyup .js-date-field'() {
-          // parse for localized date format in strict mode
-          const dateMoment = moment(this.find('#date').value, 'L', true);
-          if (dateMoment.isValid()) {
-            this.error.set('');
-            this.$('.js-datepicker').datepicker('update', dateMoment.toDate());
-          }
-        },
-        'keyup .js-time-field'() {
-          // parse for localized time format in strict mode
-          const dateMoment = moment(
-            this.find('#time').value,
-            adjustedTimeFormat(),
-            true,
-          );
-          if (dateMoment.isValid()) {
-            this.error.set('');
-          }
-        },
-        'submit .edit-date'(evt) {
-          evt.preventDefault();
-
-          // if no time was given, init with 12:00
-          const time =
-            evt.target.time.value ||
-            moment(new Date().setHours(12, 0, 0)).format('LT');
-          const newTime = moment(time, adjustedTimeFormat(), true);
-          const newDate = moment(evt.target.date.value, 'L', true);
-          const dateString = `${evt.target.date.value} ${time}`;
-          const newCompleteDate = moment(
-            dateString,
-            'L ' + adjustedTimeFormat(),
-            true,
-          );
-          if (!newTime.isValid()) {
-            this.error.set('invalid-time');
-            evt.target.time.focus();
-          }
-          if (!newDate.isValid()) {
-            this.error.set('invalid-date');
-            evt.target.date.focus();
-          }
-          if (newCompleteDate.isValid()) {
-            this._storeDate(newCompleteDate.toDate());
-            Popup.close();
-          } else {
-            if (!this.error) {
-              this.error.set('invalid');
-            }
-          }
-        },
-        'click .js-delete-date'(evt) {
-          evt.preventDefault();
-          this._deleteDate();
-          Popup.close();
-        },
-      },
-    ];
-  },
-});
+import moment from 'moment';
+import { DatePicker } from '/client/lib/datepicker';
 
 Template.dateBadge.helpers({
   canModifyCard() {
diff --git a/client/lib/datepicker.js b/client/lib/datepicker.js
index 5b62a27e5..7dc5a1be8 100644
--- a/client/lib/datepicker.js
+++ b/client/lib/datepicker.js
@@ -1,3 +1,5 @@
+import moment from 'moment';
+
 // Helper function to replace HH with H for 24 hours format, because H allows also single-digit hours
 function adjustedTimeFormat() {
   return moment
@@ -6,17 +8,17 @@ function adjustedTimeFormat() {
     .replace(/HH/i, 'H');
 }
 
-DatePicker = BlazeComponent.extendComponent({
+export class DatePicker extends BlazeComponent {
   template() {
     return 'datepicker';
-  },
+  }
 
   onCreated(defaultTime = '1970-01-01 08:00:00') {
     this.error = new ReactiveVar('');
     this.card = this.data();
     this.date = new ReactiveVar(moment.invalid());
     this.defaultTime = defaultTime;
-  },
+  }
 
   startDayOfWeek() {
     const currentUser = Meteor.user();
@@ -25,7 +27,7 @@ DatePicker = BlazeComponent.extendComponent({
     } else {
       return 1;
     }
-  },
+  }
 
   onRendered() {
     const $picker = this.$('.js-datepicker')
@@ -42,7 +44,7 @@ DatePicker = BlazeComponent.extendComponent({
           this.error.set('');
           const timeInput = this.find('#time');
           timeInput.focus();
-          if (!timeInput.value) {
+          if (!timeInput.value && this.defaultTime) {
             const currentHour = evt.date.getHours();
             const defaultMoment = moment(
               currentHour > 0 ? evt.date : this.defaultTime,
@@ -55,22 +57,22 @@ DatePicker = BlazeComponent.extendComponent({
     if (this.date.get().isValid()) {
       $picker.datepicker('update', this.date.get().toDate());
     }
-  },
+  }
 
   showDate() {
     if (this.date.get().isValid()) return this.date.get().format('L');
     return '';
-  },
+  }
   showTime() {
     if (this.date.get().isValid()) return this.date.get().format('LT');
     return '';
-  },
+  }
   dateFormat() {
     return moment.localeData().longDateFormat('L');
-  },
+  }
   timeFormat() {
     return moment.localeData().longDateFormat('LT');
-  },
+  }
 
   events() {
     return [
@@ -106,7 +108,7 @@ DatePicker = BlazeComponent.extendComponent({
           const dateString = `${evt.target.date.value} ${time}`;
           const newCompleteDate = moment(
             dateString,
-            'L ' + adjustedTimeFormat(),
+            `L ${adjustedTimeFormat()}`,
             true,
           );
           if (!newTime.isValid()) {
@@ -120,10 +122,8 @@ DatePicker = BlazeComponent.extendComponent({
           if (newCompleteDate.isValid()) {
             this._storeDate(newCompleteDate.toDate());
             Popup.close();
-          } else {
-            if (!this.error) {
-              this.error.set('invalid');
-            }
+          } else if (!this.error) {
+            this.error.set('invalid');
           }
         },
         'click .js-delete-date'(evt) {
@@ -133,5 +133,5 @@ DatePicker = BlazeComponent.extendComponent({
         },
       },
     ];
-  },
-});
+  }
+}