edward/paddington-eurostar
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Improve return date UX on search form

Browse source 
Disable the return date input until Return journey type is selected.
Clicking anywhere in the return date group auto-selects Return and
enables the field. The return date min is kept in sync with the
outbound date, bumping the value forward if it would otherwise fall
before the outbound date.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Edward Betts 2026-05-21 14:42:39 +01:00
parent a859b96a23
commit 4194e8fa64
2 changed files with 30 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

1
templates/base.html
View file

@ -196,6 +196,7 @@
/* Form groups */
.form-group { margin-bottom: 1.2rem; }
.form-group-lg { margin-bottom: 1.5rem; }
#return-date-group:has(input:disabled) { cursor: pointer; }
/* Buttons */
.btn-primary {

39
templates/index.html
View file

@ -70,13 +70,13 @@
class="form-control">
</div>
<div class="form-group-lg">
<div class="form-group-lg" id="return-date-group">
<label for="return_date" class="field-label">
Return date
</label>
<input type="date" id="return_date" name="return_date"
min="{{ today }}" value="{{ default_return_date }}"
class="form-control">
class="form-control" disabled>
</div>
<div class="form-group">
@ -108,6 +108,7 @@
<script>
(function() {
var form = document.getElementById('search-form');
var travelDate = document.getElementById('travel_date');
var returnDate = document.getElementById('return_date');
var returnRadio = document.getElementById('journey-return');
var journeyRadios = document.querySelectorAll('input[name="journey_type"]');
@ -119,21 +120,39 @@
}
function syncReturnDate() {
returnDate.name = currentJourneyType() === 'return' ? returnDateName : '';
var isReturn = currentJourneyType() === 'return';
returnDate.name = isReturn ? returnDateName : '';
returnDate.disabled = !isReturn;
}
returnDate.addEventListener('focus', function() {
returnRadio.checked = true;
syncReturnDate();
});
returnDate.addEventListener('change', function() {
returnRadio.checked = true;
syncReturnDate();
function updateReturnMin() {
if (travelDate.value) {
returnDate.min = travelDate.value;
if (returnDate.value < travelDate.value) {
returnDate.value = travelDate.value;
}
}
}
// Clicking anywhere in the return date group (including label/disabled input)
// activates return journey type and enables the field
document.getElementById('return-date-group').addEventListener('click', function() {
if (returnDate.disabled) {
returnRadio.checked = true;
syncReturnDate();
returnDate.focus();
}
});
travelDate.addEventListener('change', updateReturnMin);
journeyRadios.forEach(function(radio) {
radio.addEventListener('change', syncReturnDate);
});
form.addEventListener('submit', syncReturnDate);
updateReturnMin();
syncReturnDate();
})();
</script>