Alo/animaltrack
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix datetime picker on multi-form pages

Browse Source 
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:
Petru
2026-01-08 09:17:56 +00:00
parent d4a29130f6
commit 1d322de67b
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/animaltrack/web/templates/actions.py
View File

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