diff --git a/assets/js/pages/blocked_periods.js b/assets/js/pages/blocked_periods.js
index b4b7ba0f..be225d64 100644
--- a/assets/js/pages/blocked_periods.js
+++ b/assets/js/pages/blocked_periods.js
@@ -26,6 +26,7 @@ App.Pages.BlockedPeriods = (function () {
 
     let filterResults = {};
     let filterLimit = 20;
+    let backupStartDateTimeObject = undefined;
 
     /**
      * Add the page event listeners.
@@ -159,6 +160,27 @@ App.Pages.BlockedPeriods = (function () {
                 select(id, true);
             }
         });
+
+        $blockedPeriods.on('focus', '#start-date-time', () => {
+            backupStartDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDateTime);
+        });
+
+        /**
+         * Event: Start Date Time Input "Change"
+         */
+        $blockedPeriods.on('change', '#start-date-time', (event) => {
+            const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDateTime);
+
+            if (!backupStartDateTimeObject || !endDateTimeObject) {
+                return;
+            }
+
+            const endDateTimeMoment = moment(endDateTimeObject);
+            const backupStartDateTimeMoment = moment(backupStartDateTimeObject);
+            const diff = endDateTimeMoment.diff(backupStartDateTimeMoment);
+            const newEndDateTimeMoment = endDateTimeMoment.clone().add(diff, 'milliseconds');
+            App.Utils.UI.setDateTimePickerValue($endDateTime, newEndDateTimeMoment.toDate());
+        });
     }
 
     /**
@@ -298,6 +320,8 @@ App.Pages.BlockedPeriods = (function () {
 
         $blockedPeriods.find('.record-details .is-invalid').removeClass('is-invalid');
         $blockedPeriods.find('.record-details .form-message').hide();
+
+        backupStartDateTimeObject = undefined;
     }
 
     /**