Dynamically set min and max to arrival and departure date inputs

The departure must be at list one day after the arrival, but no longer
than seven, due to campground’s policy.
This commit is contained in:
jordi fita mas 2024-01-31 20:00:38 +01:00
parent 51540151ff
commit 4f04d973c2
4 changed files with 60 additions and 55 deletions

View File

@ -107,6 +107,12 @@ func mustRenderLayout(w io.Writer, user *auth.User, company *auth.Company, templ
"formatDate": func(time time.Time) template.HTML { "formatDate": func(time time.Time) template.HTML {
return template.HTML(`<time datetime="` + time.Format(database.ISODateFormat) + `">` + time.Format("02/01/2006") + "</time>") return template.HTML(`<time datetime="` + time.Format(database.ISODateFormat) + `">` + time.Format("02/01/2006") + "</time>")
}, },
"tomorrow": func() string {
return time.Now().AddDate(0, 0, 1).Format(database.ISODateFormat)
},
"overmorrow": func() string {
return time.Now().AddDate(0, 0, 2).Format(database.ISODateFormat)
},
"queryEscape": func(s string) string { "queryEscape": func(s string) string {
return url.QueryEscape(s) return url.QueryEscape(s)
}, },

View File

@ -0,0 +1,48 @@
(function () {
'use strict';
function updateDepartureDate(arrivalDateField) {
const arrivalDate = new Date(arrivalDateField.value);
if (isNaN(arrivalDate)) {
return;
}
const departureDateField = document.querySelector('[name="departure_date"]');
if (!departureDateField) {
return;
}
arrivalDate.setUTCDate(arrivalDate.getUTCDate() + 1);
const minDate = formatDate(arrivalDate);
departureDateField.setAttribute('min', minDate);
const departureDate = new Date(departureDateField.value);
if (isNaN(departureDate) || departureDate < arrivalDate) {
departureDateField.value = minDate;
}
arrivalDate.setUTCDate(arrivalDate.getUTCDate() + 6);
const maxDate = formatDate(arrivalDate);
departureDateField.setAttribute('max', maxDate);
if (!isNaN(departureDate) && departureDate >= arrivalDate) {
departureDateField.value = maxDate;
}
}
function formatDate(date) {
return `${date.getFullYear()}-${zeroPad(date.getMonth() + 1)}-${zeroPad(date.getDate())}`;
}
function zeroPad(num) {
return `${num < 10 ? '0' : ''}${num}`
}
const arrivalDateField = document.querySelector('[name="arrival_date"]');
if (!arrivalDateField) {
return;
}
arrivalDateField.addEventListener('change', function (event) {
updateDepartureDate(event.target);
});
updateDepartureDate(arrivalDateField);
})();

View File

@ -128,6 +128,7 @@
<label> <label>
{{( pgettext "Arrival date" "input" )}}<br> {{( pgettext "Arrival date" "input" )}}<br>
<input type="date" required <input type="date" required
min="{{ tomorrow }}"
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }} name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
><br> ><br>
</label> </label>
@ -137,6 +138,7 @@
<label> <label>
{{( pgettext "Departure date" "input" )}}<br> {{( pgettext "Departure date" "input" )}}<br>
<input type="date" required <input type="date" required
min="{{ overmorrow }}"
name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }} name="{{ .Name }}" value="{{ .Val }}" {{ template "error-attrs" . }}
><br> ><br>
</label> </label>
@ -196,30 +198,6 @@
} }
})(); })();
(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> </script>
<script src="/static/booking-dates.js"></script>
{{- end }} {{- end }}

View File

@ -40,13 +40,13 @@
<label> <label>
{{( pgettext "Check-in Date" "input")}} {{( pgettext "Check-in Date" "input")}}
<br> <br>
<input name="arrival_date" type="date" required> <input name="arrival_date" type="date" min="{{ tomorrow }}" required>
<br> <br>
</label> </label>
<label> <label>
{{( pgettext "Check-out Date" "input")}} {{( pgettext "Check-out Date" "input")}}
<br> <br>
<input name="departure_date" type="date" required> <input name="departure_date" type="date" min="{{ overmorrow }}">
<br> <br>
</label> </label>
</fieldset> </fieldset>
@ -163,33 +163,6 @@
const right = calendar.querySelector('header button:last-of-type'); const right = calendar.querySelector('header button:last-of-type');
right.addEventListener('click', () => carousel.scrollLeft += month.clientWidth); 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> </script>
<script src="/static/booking-dates.js?v={{ camperVersion }}"></script>
{{- end }} {{- end }}