From 80a57acc7bc0d4085379ab760a8a11dbef88b0ae Mon Sep 17 00:00:00 2001
From: Chi Bong Ho <cbho@pih.org>
Date: Fri, 28 Aug 2026 11:22:04 -0400
Subject: [PATCH] HTML-893: Obs checkbox element should only show dateLabel
 when checked

---
 .../element/ObsSubmissionElement.java         | 20 +++++++++++++++++
 .../main/webapp/resources/htmlFormEntry.js    | 22 +++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/api/src/main/java/org/openmrs/module/htmlformentry/element/ObsSubmissionElement.java b/api/src/main/java/org/openmrs/module/htmlformentry/element/ObsSubmissionElement.java
index dfc816977..4150d01d3 100644
--- a/api/src/main/java/org/openmrs/module/htmlformentry/element/ObsSubmissionElement.java
+++ b/api/src/main/java/org/openmrs/module/htmlformentry/element/ObsSubmissionElement.java
@@ -1282,11 +1282,31 @@ public String generateHtml(FormEntryContext context) {
 			ret.append("</span>");
 		}
 		if (dateWidget != null) {
+			// For a checkbox-style obs, the date (label + widget + clear button) is only meaningful once the
+			// checkbox is checked, so wrap it and toggle its visibility off the checkbox state.
+			boolean toggleDateWithCheckbox = context.getMode() != Mode.VIEW && valueWidget instanceof CheckboxWidget;
+			String dateHolderId = null;
+			if (toggleDateWithCheckbox) {
+				CheckboxWidget checkbox = (CheckboxWidget) valueWidget;
+				boolean checked = checkbox.getInitialValue() != null && !"".equals(checkbox.getInitialValue());
+				dateHolderId = context.getFieldNameIfRegistered(valueWidget) + "_date_holder";
+				ret.append("<span id=\"").append(dateHolderId).append("\"");
+				if (!checked) {
+					ret.append(" style=\"display:none\"");
+				}
+				ret.append(">");
+			}
 			ret.append(" ");
 			if (dateLabel != null) {
 				ret.append(dateLabel);
 			}
 			ret.append(dateWidget.generateHtml(context));
+			if (toggleDateWithCheckbox) {
+				ret.append("</span>");
+				ret.append("<script>setupCheckboxDateToggle('").append(context.getFieldNameIfRegistered(valueWidget))
+				        .append("', '").append(dateHolderId).append("', '")
+				        .append(context.getFieldNameIfRegistered(dateWidget)).append("')</script>");
+			}
 		}
 		if (accessionNumberWidget != null) {
 			ret.append(" ");
diff --git a/omod/src/main/webapp/resources/htmlFormEntry.js b/omod/src/main/webapp/resources/htmlFormEntry.js
index b46910380..1753664ed 100644
--- a/omod/src/main/webapp/resources/htmlFormEntry.js
+++ b/omod/src/main/webapp/resources/htmlFormEntry.js
@@ -675,6 +675,28 @@ function clearDatePickerValue(displaySelector, valueSelector) {
 	jQuery(displaySelector).change();
 }
 
+// For a checkbox-style obs with an associated obs date, the date (label + widget + clear button) should
+// only be shown while the checkbox is checked. When the checkbox is unchecked, the date is hidden and its
+// value cleared so it cannot trigger a "date without value" validation error on a field the user can no
+// longer see.
+function setupCheckboxDateToggle(checkboxFieldName, dateHolderId, dateFieldName) {
+	var checkboxSelector = '#' + checkboxFieldName;
+	var holderSelector = '#' + dateHolderId;
+
+	function syncDateHolderToCheckbox() {
+		if (jQuery(checkboxSelector).is(':checked')) {
+			jQuery(holderSelector).show();
+		} else {
+			jQuery(holderSelector).hide();
+			clearDatePickerValue('#' + dateFieldName + '-display', '#' + dateFieldName);
+		}
+	}
+
+	jQuery(checkboxSelector).change(syncDateHolderToCheckbox);
+
+	syncDateHolderToCheckbox();
+}
+
 // The hour/minute/second fields are only enabled once a date has been entered. If no date is entered,
 // the time fields are disabled (and reset to 00), so the DateTimeWidget is treated as having no value.
 function setupDateTimeValidation(dateFieldName, timeFieldName) {