diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js
index 11d7394bc..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,6 +140,16 @@ export class Datepicker {
     // initialize tail.datetime (datepicker) instance
     this.datepickerInstance = datetime(this._element, { ...datepickerGlobalConfig, ...datepickerConfig });
 
+    // 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 = Z_INDEX_MODAL;
+      this.datepickerInstance.dt.style.position = 'fixed';
+    }
+
     // register this datepicker instance with the formID of the given element in the datepicker collection
     const formID = this._element.form.id;
     const elemID = this._element.id;