diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/datepicker/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/datepicker/basic/.content.xml
index a96325dafc..9759c11c97 100755
--- a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/datepicker/basic/.content.xml
+++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/datepicker/basic/.content.xml
@@ -26,18 +26,18 @@
thankYouOption="page"
themeRef="/libs/fd/af/themes/canvas">
+ jcr:primaryType="nt:unstructured"
+ jcr:title="Date Input 1"
+ sling:resourceType="forms-components-examples/components/form/datepicker"
+ fieldType="date-input"
+ name="dateinput1">
+ fd:valueCommit="[{"nodeName":"ROOT"\,"items":[{"nodeName":"STATEMENT"\,"choice":{"nodeName":"EVENT_SCRIPTS"\,"items":[{"nodeName":"EVENT_CONDITION"\,"choice":{"nodeName":"EVENT_AND_COMPARISON"\,"items":[{"nodeName":"COMPONENT"\,"value":{"id":"$form.dateinput1"\,"type":"AFCOMPONENT|FIELD|DATE FIELD|DATE"\,"name":"dateinput1"}}\,{"nodeName":"EVENT_AND_COMPARISON_OPERATOR"\,"choice":{"nodeName":"EQUALS_TO"\,"value":null}}\,{"nodeName":"PRIMITIVE_EXPRESSION"\,"choice":{"nodeName":"DATE_LITERAL"\,"value":"2022-12-23"}}]}\,"nested":false}\,{"nodeName":"Then"\,"value":null}\,{"nodeName":"BLOCK_STATEMENTS"\,"items":[{"nodeName":"BLOCK_STATEMENT"\,"choice":{"nodeName":"SHOW_STATEMENT"\,"items":[{"nodeName":"AFCOMPONENT"\,"value":{"id":"$form.dateinput3"\,"displayName":"Date Input 3"\,"type":"AFCOMPONENT"\,"displayPath":"FORM/Date Input 3/"\,"name":"dateinput3"\,"parent":"$form"}}]}}\,{"nodeName":"BLOCK_STATEMENT"\,"choice":{"nodeName":"HIDE_STATEMENT"\,"items":[{"nodeName":"AFCOMPONENT"\,"value":{"id":"$form.dateinput4"\,"displayName":"Date Input 4"\,"type":"AFCOMPONENT"\,"displayPath":"FORM/Date Input 4/"\,"name":"dateinput4"\,"parent":"$form"}}]}}]}]}}]\,"isValid":true\,"enabled":true\,"version":1\,"script":["if($field == '2022-12-23'\, dispatchEvent(dateinput3\, 'custom:setProperty'\, {visible : true()})\, {})"\,"if($field == '2022-12-23'\, dispatchEvent(dateinput4\, 'custom:setProperty'\, {visible : false()})\, {})"]\,"eventName":"Value Commit"\,"ruleType":""\,"description":""},{"nodeName":"ROOT"\,"items":[{"nodeName":"STATEMENT"\,"choice":{"nodeName":"EVENT_SCRIPTS"\,"items":[{"nodeName":"EVENT_CONDITION"\,"choice":{"nodeName":"EVENT_AND_COMPARISON"\,"items":[{"nodeName":"COMPONENT"\,"value":{"id":"$form.dateinput1"\,"type":"AFCOMPONENT|FIELD|DATE FIELD|DATE"\,"name":"dateinput1"}}\,{"nodeName":"EVENT_AND_COMPARISON_OPERATOR"\,"choice":{"nodeName":"EQUALS_TO"\,"value":null}}\,{"nodeName":"PRIMITIVE_EXPRESSION"\,"choice":{"nodeName":"DATE_LITERAL"\,"value":"2023-01-01"}}]}\,"nested":false}\,{"nodeName":"Then"\,"value":null}\,{"nodeName":"BLOCK_STATEMENTS"\,"items":[{"nodeName":"BLOCK_STATEMENT"\,"choice":{"nodeName":"ENABLE_STATEMENT"\,"items":[{"nodeName":"AFCOMPONENT"\,"value":{"id":"$form.dateinput2"\,"displayName":"Date Input 2"\,"type":"FIELD"\,"displayPath":"FORM/Date Input 2/"\,"name":"dateinput2"\,"parent":"$form"}}]}}\,{"nodeName":"BLOCK_STATEMENT"\,"choice":{"nodeName":"DISABLE_STATEMENT"\,"items":[{"nodeName":"AFCOMPONENT"\,"value":{"id":"$form.dateinput4"\,"displayName":"Date Input 4"\,"type":"FIELD"\,"displayPath":"FORM/Date Input 4/"\,"name":"dateinput4"\,"parent":"$form"}}]}}]}]}}]\,"isValid":true\,"enabled":true\,"version":1\,"script":["if($field == '2023-01-01'\, dispatchEvent(dateinput2\, 'custom:setProperty'\, {enabled : true()})\, {})"\,"if($field == '2023-01-01'\, dispatchEvent(dateinput4\, 'custom:setProperty'\, {enabled : false()})\, {})"]\,"eventName":"Value Commit"\,"ruleType":""\,"description":""},{"nodeName":"ROOT"\,"items":[{"nodeName":"STATEMENT"\,"choice":{"nodeName":"EVENT_SCRIPTS"\,"items":[{"nodeName":"EVENT_CONDITION"\,"choice":{"nodeName":"BINARY_EVENT_CONDITION"\,"items":[{"nodeName":"EVENT_CONDITION"\,"choice":{"nodeName":"EVENT_AND_COMPARISON"\,"items":[{"nodeName":"COMPONENT"\,"value":{"id":"$form.dateinput1"\,"type":"DATE"\,"name":"dateinput1"}}\,{"nodeName":"EVENT_AND_COMPARISON_OPERATOR"\,"choice":{"nodeName":"is changed"\,"value":null}}\,{"nodeName":"PRIMITIVE_EXPRESSION"\,"choice":{"nodeName":"DATE_LITERAL"\,"value":null}}]}\,"nested":false}\,{"nodeName":"OPERATOR"\,"choice":{"nodeName":"AND"\,"value":null}}\,{"nodeName":"EVENT_CONDITION"\,"choice":{"nodeName":"EVENT_AND_COMPARISON"\,"items":[{"nodeName":"COMPONENT"\,"value":{"id":"$form.dateinput1"\,"type":"DATE"\,"name":"dateinput1"}}\,{"nodeName":"EVENT_AND_COMPARISON_OPERATOR"\,"choice":{"nodeName":"EQUALS_TO"\,"value":null}}\,{"nodeName":"PRIMITIVE_EXPRESSION"\,"choice":{"nodeName":"DATE_LITERAL"\,"value":"2024-04-08"}}]}\,"nested":false}]}\,"nested":false}\,{"nodeName":"Then"\,"value":null}\,{"nodeName":"BLOCK_STATEMENTS"\,"items":[{"nodeName":"BLOCK_STATEMENT"\,"choice":{"nodeName":"SET_PROPERTY"\,"items":[{"nodeName":"MEMBER_EXPRESSION"\,"items":[{"nodeName":"PROPERTY_LIST"\,"value":"readOnly"}\,{"nodeName":"of"\,"value":null}\,{"nodeName":"COMPONENT"\,"value":{"id":"$form.datepicker_14627895491712578089293"\,"displayName":"Readonly with edit and display pattern"\,"type":"FIELD|DATE FIELD"\,"displayPath":"FORM/Readonly with edit and display pattern/"\,"name":"datepicker_14627895491712578089293"\,"parent":"$form"}}]}\,{"nodeName":"to"\,"value":null}\,{"nodeName":"EXTENDED_EXPRESSION"\,"choice":{"nodeName":"BOOLEAN_LITERAL"\,"choice":{"nodeName":"False"\,"value":null}}}]}}]}]}}]\,"isValid":true\,"enabled":true\,"version":1\,"script":["if(($field.$value'null' && $field.$value == '2024-04-08')\, dispatchEvent(datepicker_14627895491712578089293\, 'custom:setProperty'\, {readOnly : false()})\, {})"]\,"eventName":"Value Commit"\,"ruleType":""\,"description":""}]"
+ jcr:primaryType="nt:unstructured"
+ validationStatus="valid"/>
+ jcr:primaryType="nt:unstructured"
+ change="[if(contains($event.payload.changes[].propertyName\, 'value')\, if($field == '2022-12-23'\, dispatchEvent(dateinput3\, 'custom:setProperty'\, {visible : true()})\, {})\, {}),if(contains($event.payload.changes[].propertyName\, 'value')\, if($field == '2022-12-23'\, dispatchEvent(dateinput4\, 'custom:setProperty'\, {visible : false()})\, {})\, {}),if(contains($event.payload.changes[].propertyName\, 'value')\, if($field == '2023-01-01'\, dispatchEvent(dateinput2\, 'custom:setProperty'\, {enabled : true()})\, {})\, {}),if(contains($event.payload.changes[].propertyName\, 'value')\, if($field == '2023-01-01'\, dispatchEvent(dateinput4\, 'custom:setProperty'\, {enabled : false()})\, {})\, {}),if(contains($event.payload.changes[].propertyName\, 'value')\, if(($field.$value'null' && $field.$value == '2024-04-08')\, dispatchEvent(datepicker_14627895491712578089293\, 'custom:setProperty'\, {readOnly : false()})\, {})\, {})]"/>
+
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..2f13c067fc 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
@@ -71,6 +71,13 @@
}
}
+ updateReadOnly(readOnly, state) {
+ super.updateReadOnly(readOnly, state);
+ if (this.widgetObject != null) {
+ this.widgetObject.markAsReadOnly(readOnly);
+ }
+ }
+
setModel(model) {
super.setModel(model);
if (!this.#noFormats()) {
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js
index 59dc1242f4..5935f8d69c 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js
@@ -26,6 +26,7 @@ if (typeof window.DatePickerWidget === 'undefined') {
#dp = null;
#curInstance = null;
+ #calendarIcon = null;
static #visible = false;
static #clickedWindow;
@@ -322,6 +323,18 @@ if (typeof window.DatePickerWidget === 'undefined') {
widget.click();
}
});
+ this.#calendarIcon = calendarIcon;
+ if (options.readOnly) {
+ this.markAsReadOnly(true)
+ }
+ }
+ }
+
+ markAsReadOnly(readonly) {
+ if (readonly) {
+ this.#calendarIcon.style.display = "none";
+ } else {
+ this.#calendarIcon.style.display = "";
}
}
diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js
index 9e442b0f39..8a20ab3fb7 100644
--- a/ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js
+++ b/ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js
@@ -257,7 +257,7 @@ describe("Form Runtime with Date Picker", () => {
}
});
- it.only("Test custom error message when incorrect date format is entered", () => {
+ it("Test custom error message when incorrect date format is entered", () => {
const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
const incorrectInputs = ["adfasdfa", "29/2/2023", "32/1/2023", "1/32/23", "1-1-2023"];
incorrectInputs.forEach(incorrectInput => {
@@ -269,4 +269,18 @@ describe("Form Runtime with Date Picker", () => {
});
});
});
+
+ it("should not show calendar widget if marked readonly", () => {
+ const [datePicker1, datePicker1FieldView] = Object.entries(formContainer._fields)[0];
+ const [datePicker8, datePicker8FieldView] = Object.entries(formContainer._fields)[9];
+ cy.get(`#${datePicker8}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should('have.css', 'display', 'none');
+ cy.get(`#${datePicker8}`).find("input").focus()
+ .then(() => {
+ cy.get(`#${datePicker8}`).find("input").blur().should("have.value","8 April, 2024");
+ })
+ cy.get(`#${datePicker1}`).find("input").clear().type('2024-04-08');
+ cy.get(`#${datePicker1}`).find("input").blur().then(() => {
+ cy.get(`#${datePicker8}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should('have.css', 'display', 'block');
+ })
+ });
})