is the value that will be visible to the user
+ */
+ #tabulateView(options) {
+ var r = 0, rows = 0,
+ row = [],
+ c;
+ this.caption.innerHTML = options.caption;
+ if (options.header) {
+ this.insertRow(r++, options.header, true, options.elementAt);
+ }
+ while (r < options.numRows) {
+ c = 0;
+ while (c < options.numColumns) {
+ row[c] = options.elementAt(r, c);
+ c++;
+ }
+ this.insertRow(r++, row, false, options.elementAt);
+ }
+ }
+
+ #hotKeysCallBack = this.#hotKeys.bind(this);
+
+ #activateField(evnt) {
+ let self = this;
+ this.#curInstance = window.afCache.get(evnt.target, "datetimepicker");
+ // Issue LC-7049:
+ // datepickerTarget should be added when activate the field and should be removed
+ // after the fields gets deactivated.
+ if (this.#options.showCalendarIcon) {
+ this.#curInstance.$field.parentNode.classList.add("datePickerTarget");
+ }
+ //enable hot keys only for non touch devices
+ if (!this.#touchSupported && !this.#keysEnabled) {
+ document.addEventListener("keydown", self.#hotKeysCallBack);
+ this.#keysEnabled = true;
+ }
+ }
+
+ #deactivateField() {
+ let self = this;
+ if (self.#curInstance) {
+ if (this.#keysEnabled) {
+ document.removeEventListener("keydown", self.#hotKeysCallBack);
+ this.#keysEnabled = false;
+ }
+ // Remove document touch listener if it exists
+ if (this.#documentTouchListener) {
+ document.removeEventListener("touchstart", this.#documentTouchListener);
+ this.#documentTouchListener = null;
+ }
+ // Issue LC-7049:
+ // datepickerTarget should be added when activate the field and should be removed
+ // after the fields gets deactivated. Otherwise clicking on any other datefield
+ // will not hide the existing datepicker
+ if (this.#options.showCalendarIcon) {
+ self.#curInstance.$field.parentNode.classList.remove(
+ "datePickerTarget");
+ }
+ self.#curInstance = null;
+ this.#hideAllViews();
+ }
+ }
+
+ #hide() {
+ if (DatePickerWidget.#visible) {
+ this.#dp.style.display = "none";
+ this.#hideAllViews();
+ DatePickerWidget.#visible = false;
+ if (this.#options.showCalendarIcon) {
+ this.#curInstance.$field.removeAttribute('readonly'); // when the datepicker is deactivated, activate the field
+ }
+ }
+ }
+
+ #hideAllViews() {
+ this['$month'].replaceChildren();
+ this['$year'].replaceChildren();
+ this['$yearset'].replaceChildren();
+ this['$month'].style.display = "none";
+ this['$year'].style.display = "none";
+ this['$yearset'].style.display = "none";
+ }
+
+ #adjustDate(step, view, focus) {
+ let maxDate, prevMaxDate;
+ let _focus = focus || false;
+ switch (view.toLowerCase()) {
+ case "day":
+ this.currentDay += step;
+ maxDate = this.#maxDate(this.currentMonth)
+ if (this.currentDay < 1) {
+ prevMaxDate = this.#maxDate((this.currentMonth - 1 + 12) % 12);
+ this.currentDay = prevMaxDate + this.currentDay;
+ return this.#adjustDate(-1, "month", _focus);
+ }
+ if (this.currentDay > maxDate) {
+ this.currentDay -= maxDate;
+ return this.#adjustDate(+1, "month", _focus);
+ }
+ break;
+ case "month":
+ this.currentMonth += step;
+ if (this.currentMonth > 11) {
+ this.currentYear++;
+ this.currentMonth = 0;
+ }
+ if (this.currentMonth < 0) {
+ this.currentYear--;
+ this.currentMonth = 11;
+ }
+ break;
+ case "year":
+ this.currentYear += step;
+ break;
+ case "yearset":
+ this.currentYear += step * this.#options.yearsPerView;
+ break;
+ }
+ this.#layout(this.view);
+ if (_focus) {
+ this.#focusedOnLi = true;
+ this.$focusedDate.setAttribute("tabindex", 0);
+ this.$focusedDate.focus();
+ }
+ }
+
+ #checkDateIsSelected(data) {
+ switch (this.view.toLowerCase()) {
+ case "month":
+ return this.currentYear === this.selectedYear && this.currentMonth
+ === this.selectedMonth && data === this.selectedDay;
+ case "year":
+ return this.currentYear === this.selectedYear && this.selectedMonth
+ === data;
+ case "yearset":
+ return this.selectedYear === data;
+ }
+ }
+
+ #checkDateIsFocussed(data) {
+ switch (this.view.toLowerCase()) {
+ case "month":
+ return data === this.currentDay;
+ case "year":
+ return this.currentMonth === data;
+ case "yearset":
+ return this.currentYear === data;
+ }
+ }
+
+ #convertNumberToLocale(number) {
+ const zeroCode = this.#options.locale.zero.charCodeAt(0);
+ number += "";
+ let newNumber = [];
+ for (let i = 0; i < number.length; i++) {
+ newNumber.push(
+ String.fromCharCode(zeroCode + parseInt(number.charAt(i))));
+ }
+ return newNumber.join("");
+ }
+
+ #clearDate(view) {
+ this.#model.dispatch(new FormView.Actions.UIChange({'value': ''}));
+ let existingSelectedItem = this['$' + view.toLowerCase()].getElementsByClassName("dp-selected")[0];
+ if (existingSelectedItem) {
+ existingSelectedItem.classList.remove("dp-selected");
+ }
+ }
+
+ #getEvent() {
+ return "click";//this.#touchSupported ? "touchstart" : "click";
+ }
+
+ #pad2(m) {
+ return m = m < 10 ? "0" + m : m;
+ }
+
+ toString() {
+ if(this.selectedYear === -1 || this.selectedMonth === -1 || this.selectedDay === -1){
+ return "";
+ }
+ const formattedDate = `${this.selectedYear}-${this.#pad2(this.selectedMonth + 1)}-${this.#pad2(this.selectedDay)}`;
+ return formattedDate;
+ }
+
+ #selectDate(evnt) {
+ let val = window.afCache.get(evnt.target, "value"),
+ nextView = this.#viewAction[this.view].li;
+
+ //disabled dates have a value of -1. Do nothing in that case
+ if (val === -1) {
+ return;
+ }
+ switch (this.view.toLowerCase()) {
+ case "month":
+ this.selectedMonth = this.currentMonth;
+ this.selectedYear = this.currentYear;
+ this.selectedDay = val;
+ this.setValue(this.toString());
+ this.#model.dispatch(new FormView.Actions.UIChange({'value': this.toString()})); // updating model value to the latest when calender is changed
+ this.#curInstance.$field.focus();
+ let existingSelectedElement = this['$'
+ + this.view.toLowerCase()].getElementsByClassName("dp-selected")[0];
+ if (existingSelectedElement) {
+ existingSelectedElement.classList.remove("dp-selected");
+ }
+ evnt.target.classList.add("dp-selected");
+ break;
+ case "year":
+ this.currentMonth = val;
+ break;
+ case "yearset":
+ this.currentYear = val;
+ break;
+ }
+ this.#layout(nextView);
+ //manually focus on the field if clicked on the popup buttons for non-touch device
+ if (!this.#touchSupported) {
+ //No need to focus if selection is made by pressing space.
+ if (!this.hotKeyPressed) {
+ this.#scriptFocus = true;
+ }
+ } else if (nextView == null) {
+ //For touch devices, deactivate the field if a selection is made
+ this.#deactivateField()
+ }
+ }
+
+ #leapYear() {
+ return this.currentYear % 400 === 0 || (this.currentYear % 100 !== 0
+ && this.currentYear % 4 === 0);
+ }
+
+ #maxDate(m) {
+ if (this.#leapYear() && m === 1) {
+ return 29;
+ } else {
+ return this.#dates[m];
+ }
+ }
+
+ #localizeDateElements(defaultOptions, locale) {
+ var calendarSymbols = FormView.LanguageUtils.getTranslatedString(locale, "calendarSymbols");
+ if (calendarSymbols && calendarSymbols.abbrdayNames) {
+ defaultOptions.locale.days = calendarSymbols.abbrdayNames;
+ }
+ if (calendarSymbols && calendarSymbols.abbrdayNames) {
+ defaultOptions.locale.months = calendarSymbols.monthNames;
+ }
+ var clearText = FormView.LanguageUtils.getTranslatedString(locale, "clearText");
+ if (clearText) {
+ defaultOptions.locale.clearText = clearText;
+ }
+ var openCalendarText = FormView.LanguageUtils.getTranslatedString(locale, "openCalendarText");
+ if (openCalendarText) {
+ defaultOptions.locale.openCalendarText = openCalendarText;
+ }
+ var zero = FormView.LanguageUtils.getTranslatedString(locale, "0");
+ if (zero) {
+ defaultOptions.locale.zero = zero;
+ }
+ var previousMonth = FormView.LanguageUtils.getTranslatedString(locale, "previousMonth");
+ if (previousMonth) {
+ defaultOptions.locale.previousMonth = previousMonth;
+ }
+ var nextMonth = FormView.LanguageUtils.getTranslatedString(locale, "nextMonth");
+ if (nextMonth) {
+ defaultOptions.locale.nextMonth = nextMonth;
+ }
+ var previousYear = FormView.LanguageUtils.getTranslatedString(locale, "previousYear");
+ if (previousYear) {
+ defaultOptions.locale.previousYear = previousYear;
+ }
+ var nextYear = FormView.LanguageUtils.getTranslatedString(locale, "nextYear");
+ if (nextYear) {
+ defaultOptions.locale.nextYear = nextYear;
+ }
+ var previousSetOfYears = FormView.LanguageUtils.getTranslatedString(locale, "previousSetOfYears");
+ if (previousSetOfYears) {
+ defaultOptions.locale.previousSetOfYears = previousSetOfYears;
+ }
+ var nextSetOfYears = FormView.LanguageUtils.getTranslatedString(locale, "nextSetOfYears");
+ if (nextSetOfYears) {
+ defaultOptions.locale.nextSetOfYears = nextSetOfYears;
+ }
+ }
+
+ #isEditValueOrDisplayValue(value) {
+ return (this.#model.editValue === value || this.#model.displayValue
+ === value);
+ }
+
+ /**
+ * returns the original value of format YYYY-MM-DD
+ * @returns {*|string}
+ */
+ getValue() {
+ if (this.#isEditValueOrDisplayValue(this.#widget.value)) {
+ return this.#model.value; // if the widget has edit/display value thiss method should return model value
+ }
+ return this.#widget.value;
+ }
+
+ /**
+ * Sets the formatted display value on the widget.
+ * value should be in YYYY-MM-DD format
+ * @param value
+ */
+ setDisplayValue(value) {
+ if (this.#curInstance != null) {
+ this.#curInstance.$field.value = this.#curInstance.displayValue(
+ this.toString()) || value;
+ } else {
+ this.#widget.value = this.#model.displayValue || value;
+ }
+ }
+
+ setCalendarWidgetValue(value) {
+ if (this.#curInstance === null && this.#widget != null) {
+ this.#curInstance = window.afCache.get(this.#widget, "datetimepicker");
+ }
+ if (this.#curInstance != null) {
+ // also change the date of the calendar widget
+ this.#curInstance.selectedDate = value;
+ }
+ }
+
+ /**
+ * Sets the formatted edit value on the widget
+ * @param value
+ */
+
+ setValue(value) {
+ let currDate;
+ if (value instanceof Date && !isNaN(value)) {
+ // If value is already a Date object and it's valid, use it as is
+ currDate = value;
+ } else {
+ // Check if value is empty
+ if (!value || value.trim() === '') {
+ currDate = new Date();
+ } else {
+ let displayFormat = this.#model._jsonModel?.displayFormat;
+ // If displayFormat is null/undefined, use default parsing
+ if (!displayFormat) {
+ currDate = new Date(value);
+ } else {
+ // Use FormView.Formatters.parseDate for custom formats
+ currDate = FormView.Formatters.parseDate(value, this.#lang || 'en', displayFormat);
+ // If parseDate failed (returned null), fallback to default parsing
+ if (currDate === null) {
+ currDate = new Date(value);
+ }
+ const timezoneOffset = currDate.getTimezoneOffset();
+ currDate.setMinutes(currDate.getMinutes() + timezoneOffset);
+ }
+ }
+ }
+
+ if (!isNaN(currDate) && value != null) {
+ //in case the value is directly updated from the field without using calendar widget
+ this.selectedMonth = currDate.getMonth();
+ this.selectedYear = currDate.getFullYear();
+ this.selectedDay = currDate.getDate();
+ } else {
+ this.selectedYear
+ = this.selectedMonth
+ = this.selectedDay
+ = -1;
+ }
+ if (this.#curInstance != null) {
+ if (!this.#isEditValueOrDisplayValue(value)) {
+ this.#curInstance.selectedDate = value; // prevent edit/display value from getting set in calender
+ }
+ this.#curInstance.$field.value = this.#curInstance.editValue() || value;
+ } else {
+ this.#widget.value = value;
+ }
+ }
+
+ addEventListener(event, handler, widget) {
+ let inst = window.afCache.get(widget, "datetimepicker");
+ inst.$field.addEventListener(event, function (e) {
+ switch (e.type) {
+ case 'blur':
+ if (!DatePickerWidget.#visible) {
+ handler(e);
+ }
+ break;
+ case 'focus':
+ handler(e);
+ break;
+ case 'input':
+ handler(e);
+ break;
+
+ }
+ });
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v2/datepicker/datepicker.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v2/datepicker/datepicker.html
new file mode 100644
index 0000000000..6cff5a1b85
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v2/datepicker/datepicker.html
@@ -0,0 +1,59 @@
+
+
+
\ No newline at end of file
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v2/datepicker/datepicker.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v2/datepicker/datepicker.js
new file mode 100644
index 0000000000..953cc77046
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v2/datepicker/datepicker.js
@@ -0,0 +1,31 @@
+/*******************************************************************************
+ * Copyright 2025 Adobe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+use(function () {
+ var clientlibsArr = ['core.forms.components.base.v1.editor'];
+ var labelPath = 'core/fd/components/af-commons/v1/fieldTemplates/label.html';
+ var shortDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html";
+ var longDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/longDescription.html";
+ var questionMarkPath = "core/fd/components/af-commons/v1/fieldTemplates/questionMark.html"
+ var errorMessagePath = "core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html";
+ return {
+ labelPath: labelPath,
+ shortDescriptionPath: shortDescriptionPath,
+ longDescriptionPath: longDescriptionPath,
+ questionMarkPath: questionMarkPath,
+ errorMessagePath: errorMessagePath,
+ clientlibs: clientlibsArr
+ }
+});
\ No newline at end of file
diff --git a/ui.tests/test-module/specs/datepicker/datepickerv2.runtime.cy.js b/ui.tests/test-module/specs/datepicker/datepickerv2.runtime.cy.js
new file mode 100644
index 0000000000..454d29a8fd
--- /dev/null
+++ b/ui.tests/test-module/specs/datepicker/datepickerv2.runtime.cy.js
@@ -0,0 +1,54 @@
+/*******************************************************************************
+ * Copyright 2025 Adobe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+
+describe("Form Runtime with Date Picker v2", () => {
+
+ const pagePath = "content/forms/af/core-components-it/samples/datepicker/basic.html";
+ const bemBlock = "cmp-adaptiveform-datepicker";
+ let formContainer = null;
+
+ beforeEach(() => {
+ cy.previewForm(pagePath).then(p => {
+ formContainer = p;
+ });
+ });
+
+ const openFirstDatepickerCalendar = () => {
+ cy.get(`.${bemBlock}__calendar-icon`).first().as("calendarIcon");
+ cy.get("@calendarIcon").should("exist").click({ force: true });
+ cy.get(".datetimepicker").should("be.visible");
+ cy.get(".dp-monthview").should("exist");
+ };
+
+ it("should open calendar with keyboard on calendar icon (Space/Enter)", () => {
+ expect(formContainer, "formcontainer is initialized").to.not.be.null;
+ cy.get(`.${bemBlock}__calendar-icon`).first().as("calendarIcon");
+ cy.get("@calendarIcon").should("exist").focus();
+
+ cy.get("@calendarIcon").type(" ", { force: true });
+ cy.get(".datetimepicker").should("be.visible");
+ cy.get(".dp-monthview").should("exist");
+
+ cy.get("body").click(0, 0, { force: true });
+ cy.get(".datetimepicker").should("not.be.visible");
+
+ cy.get("@calendarIcon").focus().type("{enter}", { force: true });
+ cy.get(".datetimepicker").should("be.visible");
+ cy.get(".dp-monthview").should("exist");
+ });
+});
+
+