diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js
index 1f20ba505d..072e7d2550 100644
--- a/app/webpacker/controllers/flatpickr_controller.js
+++ b/app/webpacker/controllers/flatpickr_controller.js
@@ -51,6 +51,7 @@ export default class extends Flatpickr {
       plugins: this.plugins(mode, datetimepicker),
       mode,
     };
+    window.addEventListener("flatpickr:change", this.onChangeEvent.bind(this));
   }
 
   clear(e) {
@@ -60,6 +61,23 @@ export default class extends Flatpickr {
   open() {
     this.fp.element.dispatchEvent(new Event("focus"));
   }
+  onChangeEvent(e) {
+    if (
+      this.modeValue == "range" &&
+      this.hasStartTarget &&
+      this.hasEndTarget &&
+      e.detail.startDate &&
+      e.detail.endDate
+    ) {
+      // date range mode
+      this.startTarget.value = e.detail.startDate;
+      this.endTarget.value = e.detail.endDate;
+      this.fp.setDate([e.detail.startDate, e.detail.endDate]);
+    } else if (e.detail.date) {
+      // single date mode
+      this.fp.setDate(e.detail.date);
+    }
+  }
 
   change(selectedDates, dateStr, instance) {
     if (this.hasStartTarget && this.hasEndTarget && this.modeValue == "range") {