diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js
index acc057502..932d3b515 100644
--- a/frontend/src/utils/form/datepicker.js
+++ b/frontend/src/utils/form/datepicker.js
@@ -3,6 +3,7 @@ import { Utility } from '../../core/utility';
 import moment from 'moment';
 
 const KEYCODE_ESCAPE = 27;
+const Z_INDEX_MODAL = 9999;
 
 // INTERNAL (Uni2work specific) formats for formatting dates and/or times
 const FORM_DATE_FORMAT = {
@@ -139,9 +140,14 @@ export class Datepicker {
     // initialize tail.datetime (datepicker) instance
     this.datepickerInstance = datetime(this._element, { ...datepickerGlobalConfig, ...datepickerConfig });
 
-    // if the input element is in any open modal, increase the z-index of the datepicker
+    // append the datepicker element (dt) to the form
+    this._element.form.appendChild(this.datepickerInstance.dt);
+
+    // if the input element is in any open modal, increase the z-index of the datepicker and set its position to fixed to avoid repositioning on page scroll
+    // FIXME: instead of setting the position to fixed, use absolute and reposition (decrease left)
     if (this._element.closest('.modal--open')) {
-      this.datepickerInstance.dt.style.zIndex = 9999;
+      this.datepickerInstance.dt.style.zIndex = Z_INDEX_MODAL;
+      this.datepickerInstance.dt.style.position = 'fixed';
     }
 
     // register this datepicker instance with the formID of the given element in the datepicker collection