Allow same-day return journeys in the date selector

Select the outbound date again to complete a day trip, with a clear hint and summary and no misleading range highlight. Cover desktop and mobile selection, submission, and reselection with Playwright.

Closes #9
This commit is contained in:
Edward Betts 2026-09-18 20:22:32 +01:00
parent c9aad7ad4c
commit 8be2e29d76
2 changed files with 83 additions and 19 deletions

View file

@ -122,7 +122,7 @@
<button type="button" id="cal-next" class="cal-nav-btn" aria-label="Next month">&#8250;</button>
</div>
<div id="cal-months"></div>
<div id="cal-hint" class="cal-hint"></div>
<div id="cal-hint" class="cal-hint" aria-live="polite"></div>
</div>
<!-- Hidden inputs submitted with the form -->
<input type="hidden" id="travel_date" name="travel_date">
@ -258,12 +258,7 @@
retPhase = true;
} else {
/* selecting return date */
if (sameDay(d, outDate)) {
/* tapped same day → reset */
outDate = null;
retDate = null;
retPhase = false;
} else if (d < outDate) {
if (d < outDate) {
/* earlier than outbound → new outbound, keep retPhase */
outDate = d;
} else {
@ -309,7 +304,7 @@
function buildMonth(year, month) {
/* effective range (includes hover preview) */
var rangeA = null, rangeB = null;
if (outDate && retDate) {
if (outDate && retDate && !sameDay(outDate, retDate)) {
rangeA = outDate < retDate ? outDate : retDate;
rangeB = outDate < retDate ? retDate : outDate;
} else if (outDate && retPhase && hoverDate && hoverDate > outDate) {
@ -419,6 +414,9 @@
/* ── hover range: update cell styles in-place (no DOM rebuild) ───── */
function applyHoverStyles(rangeA, rangeB) {
if (!rangeA || !rangeB || rangeB <= rangeA) {
rangeA = rangeB = null;
}
document.querySelectorAll('.cal-cell[data-date]').forEach(function (cell) {
var d = new Date(cell.getAttribute('data-date') + 'T00:00:00');
var col = parseInt(cell.getAttribute('data-col'), 10);
@ -451,7 +449,10 @@
el.innerHTML = '<span class="cal-cta">Select outbound date</span>';
} else if (retPhase) {
el.innerHTML = 'Outbound: <strong>' + dispDate(outDate) +
'</strong> &nbsp;&middot;&nbsp; <span class="cal-cta">Now select return date</span>';
'</strong> &nbsp;&middot;&nbsp; <span class="cal-cta">Now select return date</span>' +
' — select the same date for a day trip.';
} else if (sameDay(outDate, retDate)) {
el.innerHTML = 'Day trip: <strong>' + dispDate(outDate) + '</strong> (out and back)';
} else {
el.innerHTML = 'Outbound: <strong>' + dispDate(outDate) +
'</strong> &nbsp;&middot;&nbsp; Return: <strong>' + dispDate(retDate) + '</strong>';