diff --git a/src/shared/marko/components/mcalendar/component.js b/src/shared/marko/components/mcalendar/component.js
index 3c9229e0..eef6cc9e 100644
--- a/src/shared/marko/components/mcalendar/component.js
+++ b/src/shared/marko/components/mcalendar/component.js
@@ -221,15 +221,14 @@ module.exports = class {
     }
 
     onCalendarClear(e) {
-        if (e && e.preventDefault) {
-            e.preventDefault();
-        }
         const calendar = this.clearCalendar(cloneDeep(this.state.calendar));
+        calendar.data = this.updateCalendarData(calendar.year, calendar.month);
         calendar.visible = false;
         this.setState("calendar", calendar);
-        if (e) {
+        if (e && e.preventDefault) {
             // this.emit("value-change", calendar.value);
             this.emit("clear-click");
+            e.preventDefault();
         }
     }
 
diff --git a/src/shared/marko/components/mform/component.js b/src/shared/marko/components/mform/component.js
index 8e96d465..3015848f 100644
--- a/src/shared/marko/components/mform/component.js
+++ b/src/shared/marko/components/mform/component.js
@@ -205,12 +205,21 @@ module.exports = class {
             }
             if (field.type === "datepicker") {
                 const element = document.getElementById(`${this.input.id}_${field.id}`);
-                if (element && element.value.match(/_/)) {
-                    const data = cloneDeep(this.state.data);
-                    data[prevTabId][field.id] = null;
-                    this.setState("data", data);
+                if (element) {
+                    if (element.value.match(/_/)) {
+                        const data = cloneDeep(this.state.data);
+                        data[prevTabId][field.id] = null;
+                        this.setState("data", data);
+                    }
+                    const currentValue = this.state.data[dataset.id][field.id];
+                    if (currentValue) {
+                        const dateObject = parse(currentValue, "yyyyMMdd", new Date());
+                        this.masked[field.id].value = format(dateObject, this.i18n.t("global.dateFormatShort"));
+                    } else {
+                        this.masked[field.id].value = "";
+                    }
+                    this.masked[field.id].updateValue();
                 }
-                this.masked[field.id].unmaskedValue = this.state.data[dataset.id][field.id] || "";
             }
         });
     }
@@ -332,13 +341,13 @@ module.exports = class {
             value = Array.from(new Set(value));
             break;
         case "datepicker":
-            value = value ? format(value, "yyyyMMdd") : null;
-            const element = document.getElementById(`${this.input.id}_${obj.id}`);
-            if (element) {
-                element.value = obj.value ? format(obj.value, this.i18n.t("global.dateFormatShort")) : null;
-                this.masked[obj.id].maskedValue = value;
-                this.masked[obj.id].updateValue();
+            value = obj.value ? format(obj.value, "yyyyMMdd") : null;
+            if (obj.noMaskUpdate) {
+                break;
             }
+            const datepickerValue = obj.value ? format(obj.value, this.i18n.t("global.dateFormatShort")) : "";
+            this.masked[obj.id].value = datepickerValue;
+            this.masked[obj.id].updateValue();
             break;
         default:
             value = String(value).trim();
diff --git a/src/shared/marko/components/mform/mField/component.js b/src/shared/marko/components/mform/mField/component.js
index bb665945..13abb934 100644
--- a/src/shared/marko/components/mform/mField/component.js
+++ b/src/shared/marko/components/mform/mField/component.js
@@ -7,7 +7,6 @@ const {
     v4: uuidv4
 } = require("uuid");
 const {
-    format,
     parse,
 } = require("date-fns");
 const axios = require("axios");
@@ -73,7 +72,6 @@ module.exports = class {
             item: input.item,
             imageDragging: false,
             calendarValue: null,
-            calendarValueText: "",
             tags: [],
             tagInputValue: null,
         };
@@ -209,14 +207,17 @@ module.exports = class {
             this.calendarField.func.setDate(value);
             this.setState("calendarValue", value);
             const dateObject = typeof value === "string" ? parse(value, "yyyyMMdd", new Date()) : value;
-            this.setState("calendarValueText", format(dateObject, this.i18n.t("global.dateFormatShort")));
             this.emit("value-change", {
                 type: "datepicker",
                 id: this.state.item.id,
                 value: dateObject,
             });
         } else {
-            this.setState("calendarValueText", "");
+            this.emit("value-change", {
+                type: "datepicker",
+                id: this.state.item.id,
+                value: null,
+            });
         }
     }
 
@@ -577,6 +578,7 @@ module.exports = class {
 
     onCalendarClearClick() {
         this.updateDatePicker(null);
+        this.setState("calendarVisible", false);
     }
 
     onDatePickerKeyPress(e) {
@@ -588,7 +590,13 @@ module.exports = class {
             const element = document.getElementById(`${this.input.id}_${this.state.item.id}`);
             if (element && !element.value.match(/_/)) {
                 const dateObject = parse(element.value, this.i18n.t("global.dateFormatShort"), new Date());
-                this.updateDatePicker(dateObject);
+                this.setState("calendarValue", dateObject);
+                this.emit("value-change", {
+                    type: "datepicker",
+                    id: this.state.item.id,
+                    value: dateObject,
+                    noMaskUpdate: true,
+                });
             }
         });
     }
diff --git a/src/shared/marko/components/mform/mField/index.marko b/src/shared/marko/components/mform/mField/index.marko
index 16b2d0e5..47a45986 100644
--- a/src/shared/marko/components/mform/mField/index.marko
+++ b/src/shared/marko/components/mform/mField/index.marko
@@ -677,7 +677,6 @@ Date Picker
 				key=`mf_ctl_${state.item.id}`
 				data-id=state.item.id
 				disabled=(!state.enabled || !state.visible)
-				value=state.calendarValueText
 				no-update
 				on-click("onDatePickerInputClick")
 				on-focus("onDatePickerInputClick")