From 9444fcfba4896fd4a272985f18ff157da303e3b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20G=C3=B6elzer=20Portolann=20Malkiewiez?=
 <romulomalkiewiez@gmail.com>
Date: Fri, 24 Jun 2022 09:32:19 -0300
Subject: [PATCH 1/2] Datepicker: Make sure altField is treated as a CSS
 selector [SO-2932013]

---
 ui/datepicker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/datepicker.js b/ui/datepicker.js
index 155bbc61929..1462cb5cad2 100644
--- a/ui/datepicker.js
+++ b/ui/datepicker.js
@@ -1071,7 +1071,7 @@ $.extend(Datepicker.prototype, {
 			altFormat = this._get(inst, "altFormat") || this._get(inst, "dateFormat");
 			date = this._getDate(inst);
 			dateStr = this.formatDate(altFormat, date, this._getFormatConfig(inst));
-			$(altField).each(function() { $(this).val(dateStr); });
+			$(document).find(altField).val(dateStr);
 		}
 	},
 

From 570cde465bf166ade298df21904b1762379e5d71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20G=C3=B6elzer=20Portolann=20Malkiewiez?=
 <romulomalkiewiez@gmail.com>
Date: Fri, 24 Jun 2022 10:09:36 -0300
Subject: [PATCH 2/2] Datepicker: Make sure text option are text, shorten HTML
 strings [SO-2932013]

---
 ui/datepicker.js | 136 +++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 115 insertions(+), 21 deletions(-)

diff --git a/ui/datepicker.js b/ui/datepicker.js
index 1462cb5cad2..8dcaa077eca 100644
--- a/ui/datepicker.js
+++ b/ui/datepicker.js
@@ -227,7 +227,9 @@ $.extend(Datepicker.prototype, {
 			inst.append.remove();
 		}
 		if (appendText) {
-			inst.append = $("<span class='" + this._appendClass + "'>" + appendText + "</span>");
+			inst.append = $("<span>")
+					.addClass(this._appendClass)
+					.text(appendText);
 			input[isRTL ? "before" : "after"](inst.append);
 		}
 
@@ -244,12 +246,32 @@ $.extend(Datepicker.prototype, {
 		if (showOn === "button" || showOn === "both") { // pop-up date picker when button clicked
 			buttonText = this._get(inst, "buttonText");
 			buttonImage = this._get(inst, "buttonImage");
-			inst.trigger = $(this._get(inst, "buttonImageOnly") ?
-				$("<img/>").addClass(this._triggerClass).
-					attr({ src: buttonImage, alt: buttonText, title: buttonText }) :
-				$("<button type='button'></button>").addClass(this._triggerClass).
-					html(!buttonImage ? buttonText : $("<img/>").attr(
-					{ src:buttonImage, alt:buttonText, title:buttonText })));
+
+			if (this._get(inst, "buttonImageOnly")) {
+				inst.trigger = $("<img>")
+					.addClass(this._triggerClass)
+					.attr({
+						src: buttonImage,
+						alt: buttonText,
+						title: buttonText
+					});
+			} else {
+				inst.trigger = $("<button type='button'>")
+					.addClass(this._triggerClass);
+				if (buttonImage) {
+					inst.trigger.html(
+						$("<img>")
+							.attr({
+								src: buttonImage,
+								alt: buttonText,
+								title: buttonText
+							})
+					);
+				} else {
+					inst.trigger.text(buttonText);
+				}
+			}
+
 			input[isRTL ? "before" : "after"](inst.trigger);
 			inst.trigger.click(function() {
 				if ($.datepicker._datepickerShowing && $.datepicker._lastInput === input[0]) {
@@ -1676,32 +1698,104 @@ $.extend(Datepicker.prototype, {
 			this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepMonths, 1)),
 			this._getFormatConfig(inst)));
 
-		prev = (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ?
-			"<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click'" +
-			" title='" + prevText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "e" : "w") + "'>" + prevText + "</span></a>" :
-			(hideIfNoPrevNext ? "" : "<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='"+ prevText +"'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "e" : "w") + "'>" + prevText + "</span></a>"));
+		if (this._canAdjustMonth(inst, -1, drawYear, drawMonth)) {
+			prev = $("<a>")
+				.attr({
+					"class": "ui-datepicker-prev ui-corner-all",
+					"data-handler": "prev",
+					"data-event": "click",
+					title: prevText
+				})
+				.append(
+					$("<span>")
+						.addClass("ui-icon ui-icon-circle-triangle-" +
+							(isRTL ? "e" : "w"))
+						.text(prevText)
+				)[0].outerHTML;
+		} else if (hideIfNoPrevNext) {
+			prev = "";
+		} else {
+			prev = $("<a>")
+				.attr({
+					"class": "ui-datepicker-prev ui-corner-all ui-state-disabled",
+					title: prevText
+				})
+				.append(
+					$("<span>")
+						.addClass("ui-icon ui-icon-circle-triangle-" +
+							(isRTL ? "e" : "w"))
+						.text(prevText)
+				)[0].outerHTML;
+		}
 
 		nextText = this._get(inst, "nextText");
 		nextText = (!navigationAsDateFormat ? nextText : this.formatDate(nextText,
 			this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepMonths, 1)),
 			this._getFormatConfig(inst)));
 
-		next = (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ?
-			"<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click'" +
-			" title='" + nextText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "w" : "e") + "'>" + nextText + "</span></a>" :
-			(hideIfNoPrevNext ? "" : "<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='"+ nextText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "w" : "e") + "'>" + nextText + "</span></a>"));
+		if (this._canAdjustMonth(inst, +1, drawYear, drawMonth)) {
+			next = $("<a>")
+				.attr({
+					"class": "ui-datepicker-next ui-corner-all",
+					"data-handler": "next",
+					"data-event": "click",
+					title: nextText
+				})
+				.append(
+					$("<span>")
+						.addClass("ui-icon ui-icon-circle-triangle-" +
+							(isRTL ? "w" : "e"))
+						.text(nextText)
+				)[0].outerHTML;
+		} else if (hideIfNoPrevNext) {
+			next = "";
+		} else {
+			next = $("<a>")
+				.attr({
+					"class": "ui-datepicker-next ui-corner-all ui-state-disabled",
+					title: nextText
+				})
+				.append(
+					$("<span>")
+						.attr("class", "ui-icon ui-icon-circle-triangle-" +
+							(isRTL ? "w" : "e"))
+						.text(nextText)
+				)[0].outerHTML;
+		}
 
 		currentText = this._get(inst, "currentText");
 		gotoDate = (this._get(inst, "gotoCurrent") && inst.currentDay ? currentDate : today);
 		currentText = (!navigationAsDateFormat ? currentText :
 			this.formatDate(currentText, gotoDate, this._getFormatConfig(inst)));
 
-		controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
-			this._get(inst, "closeText") + "</button>" : "");
-
-		buttonPanel = (showButtonPanel) ? "<div class='ui-datepicker-buttonpane ui-widget-content'>" + (isRTL ? controls : "") +
-			(this._isInRange(inst, gotoDate) ? "<button type='button' class='ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all' data-handler='today' data-event='click'" +
-			">" + currentText + "</button>" : "") + (isRTL ? "" : controls) + "</div>" : "";
+		controls = "";
+		if (!inst.inline) {
+			controls = $("<button>")
+				.attr({
+					type: "button",
+					"class": "ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all",
+					"data-handler": "hide",
+					"data-event": "click"
+				})
+				.text(this._get(inst, "closeText"))[0].outerHTML;
+		}
+
+		buttonPanel = "";
+		if (showButtonPanel) {
+			buttonPanel = $("<div class='ui-datepicker-buttonpane ui-widget-content'>")
+				.append(isRTL ? controls : "")
+				.append(this._isInRange(inst, gotoDate) ?
+					$("<button>")
+						.attr({
+							type: "button",
+							"class": "ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all",
+							"data-handler": "today",
+							"data-event": "click"
+						})
+						.text(currentText) :
+					"")
+				.append(isRTL ? "" : controls)[0].outerHTML;
+		}
 
 		firstDay = parseInt(this._get(inst, "firstDay"),10);
 		firstDay = (isNaN(firstDay) ? 0 : firstDay);