Automatically select the departure date when arrival changes
By default, it selects the next day, unless the new arrival date is before the current departure, in which case is left as is, because the idea is to help people avoid useless calendar selections when booking for next three or four months: they would need to change the month twice, and now only at most one.
This commit is contained in:
parent
a226d17aa7
commit
9b96a355a4
|
@ -147,7 +147,8 @@
|
|||
<label>
|
||||
<input type="checkbox" required name="{{ .Name }}" {{ if .Checked}}checked{{ end }}
|
||||
{{ template "error-attrs" . }}
|
||||
> {{ printf ( pgettext "I have read and I accept <a href=\"%s\" target=\"_blank\">the reservation conditions</a>" "input" ) (print "/" currentLocale "/legal/reservation") | raw }}</label><br>
|
||||
> {{ printf ( pgettext "I have read and I accept <a href=\"%s\" target=\"_blank\">the reservation conditions</a>" "input" ) (print "/" currentLocale "/legal/reservation") | raw }}
|
||||
</label><br>
|
||||
{{ template "error-message" . }}
|
||||
{{- end }}
|
||||
</fieldset>
|
||||
|
@ -158,6 +159,8 @@
|
|||
{{- end }}
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
const fieldSets = Array.from(document.querySelectorAll('fieldset[data-campsite]'));
|
||||
const options = document.querySelectorAll('input[type="radio"]');
|
||||
|
||||
|
@ -178,5 +181,32 @@
|
|||
toggleFieldSets(option);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const arrivalDateField = document.querySelector('[name="arrival_date"]');
|
||||
if (!arrivalDateField) {
|
||||
return;
|
||||
}
|
||||
|
||||
arrivalDateField.addEventListener('change', function (event) {
|
||||
const arrivalDate = new Date(event.target.value);
|
||||
if (isNaN(arrivalDate)) {
|
||||
return;
|
||||
}
|
||||
const departureDateField = document.querySelector('[name="departure_date"]');
|
||||
if (!departureDateField) {
|
||||
return;
|
||||
}
|
||||
const departureDate = new Date(departureDateField.value);
|
||||
if (!isNaN(departureDate) && departureDate >= arrivalDate) {
|
||||
return;
|
||||
}
|
||||
arrivalDate.setUTCDate(arrivalDate.getUTCDate() + 1);
|
||||
departureDateField.value = `${arrivalDate.getFullYear()}-${arrivalDate.getMonth() < 9 ? '0' : ''}${(arrivalDate.getMonth() + 1)}-${arrivalDate.getDate()}`
|
||||
})
|
||||
})();
|
||||
</script>
|
||||
{{- end }}
|
||||
|
|
|
@ -142,6 +142,33 @@
|
|||
const right = calendar.querySelector('header button:last-of-type');
|
||||
right.addEventListener('click', () => carousel.scrollLeft += month.clientWidth);
|
||||
})();
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const arrivalDateField = document.querySelector('[name="arrival_date"]');
|
||||
if (!arrivalDateField) {
|
||||
return;
|
||||
}
|
||||
|
||||
arrivalDateField.addEventListener('change', function (event) {
|
||||
const arrivalDate = new Date(event.target.value);
|
||||
if (isNaN(arrivalDate)) {
|
||||
return;
|
||||
}
|
||||
const departureDateField = document.querySelector('[name="departure_date"]');
|
||||
if (!departureDateField) {
|
||||
return;
|
||||
}
|
||||
const departureDate = new Date(departureDateField.value);
|
||||
if (!isNaN(departureDate) && departureDate >= arrivalDate) {
|
||||
return;
|
||||
}
|
||||
console.log('fuck you', departureDate);
|
||||
arrivalDate.setUTCDate(arrivalDate.getUTCDate() + 1);
|
||||
departureDateField.value = `${arrivalDate.getFullYear()}-${arrivalDate.getMonth() < 9 ? '0' : ''}${(arrivalDate.getMonth() + 1)}-${arrivalDate.getDate()}`
|
||||
})
|
||||
})();
|
||||
</script>
|
||||
|
||||
{{- end }}
|
||||
|
|
Loading…
Reference in New Issue