Fix datetime picker on multi-form pages

The event_datetime_field JavaScript used querySelector to find the
ts_utc hidden input by name, which breaks when multiple forms have
ts_utc fields (like feed give and purchase forms). Now each hidden
field gets a unique ID based on the field_id parameter, and the
JavaScript uses getElementById for correct scoping.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-08 09:17:56 +00:00
parent d4a29130f6
commit 1d322de67b

View File

@@ -47,6 +47,7 @@ def event_datetime_field(
"""
picker_id = f"{field_id}_picker"
input_id = f"{field_id}_input"
ts_utc_id = f"{field_id}_ts_utc"
# If initial value is set, start with picker expanded
has_initial = bool(initial_value)
@@ -57,7 +58,7 @@ def event_datetime_field(
toggle_onclick = f"""
var picker = document.getElementById('{picker_id}');
var input = document.getElementById('{input_id}');
var tsField = document.querySelector('input[name="ts_utc"]');
var tsField = document.getElementById('{ts_utc_id}');
if (picker.style.display === 'none') {{
picker.style.display = 'block';
this.textContent = 'Use current time';
@@ -70,14 +71,14 @@ def event_datetime_field(
"""
# Inline JavaScript for input change handler
input_onchange = """
var tsField = document.querySelector('input[name="ts_utc"]');
if (tsField && this.value) {
input_onchange = f"""
var tsField = document.getElementById('{ts_utc_id}');
if (tsField && this.value) {{
var date = new Date(this.value);
tsField.value = date.getTime().toString();
} else if (tsField) {
}} else if (tsField) {{
tsField.value = '0';
}
}}
"""
return Div(
@@ -111,7 +112,7 @@ def event_datetime_field(
),
cls="mt-1",
),
Hidden(name="ts_utc", value=initial_ts),
Hidden(id=ts_utc_id, name="ts_utc", value=initial_ts),
cls="space-y-1",
)