diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/prefill/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/prefill/basic/.content.xml
index c5e4aca5af..0fcf70b011 100644
--- a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/prefill/basic/.content.xml
+++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/prefill/basic/.content.xml
@@ -46,6 +46,8 @@
                     sling:resourceType="forms-components-examples/components/form/datepicker"
                     enabled="{Boolean}true"
                     fieldType="date-input"
+                    displayFormat="d MMMM, y"
+                    displayPatternType="d MMMM, y"
                     name="dob"
                     readOnly="{Boolean}false"
                     textIsRich="[true,true]"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerview.js
index 5e1ee4879e..6b7924da7d 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerview.js
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerview.js
@@ -77,15 +77,15 @@
                 if (this.widgetObject == null) {
                     this.widgetObject = new DatePickerWidget(this, this.getWidget(), model);
                 }
-                if (this.widgetObject.getValue() !== '') {
-                    this._model.value = this.widgetObject.getValue();
+                if (this.isActive()) {
+                    this.widgetObject.setValue(model.value);
+                } else {
+                    this.widgetObject.setDisplayValue(model.value);
                 }
                 this.widgetObject.addEventListener('blur', (e) => {
                     this._model.value = this.widgetObject.getValue();
-
                     //setDisplayValue is required for cases where value remains same while focussing in and out.
                     this.widgetObject.setDisplayValue(this._model.value);
-
                     this.setInactive();
                 }, this.getWidget());
                 this.widgetObject.addEventListener('focus', (e) => {
@@ -104,7 +104,6 @@
                     this.setActive();
                 });
             }
-
         }
 
         #noFormats() {
diff --git a/ui.tests/test-module/specs/prefill/customprefill.spec.js b/ui.tests/test-module/specs/prefill/customprefill.spec.js
index a640810db5..440d703e8b 100644
--- a/ui.tests/test-module/specs/prefill/customprefill.spec.js
+++ b/ui.tests/test-module/specs/prefill/customprefill.spec.js
@@ -53,7 +53,7 @@ describe('Custom Prefill Test', function () {
             cy.previewForm(pagePath, {"params" : [`prefillId=${prefillId}`]});
             // validating the prefilled data
             cy.get(nameTextBox).should("have.value", "John Doe");
-            cy.get(dobDropdown).should("have.value", "1999-10-10");
+            cy.get(dobDropdown).should("have.value", "10 October, 1999");
             cy.get(genderRadioButton).should("have.value", "0");
             cy.get(jobDropdown).should("have.value", "1");
         }