tandem
/
camper
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pkg/template/render.go
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 {
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 {
return url.QueryEscape(s)
},

48
web/static/booking-dates.js Normal file
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);
})();

28
web/templates/public/booking.gohtml
View File

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

33
web/templates/public/campsite/type.gohtml
View File

@ -40,13 +40,13 @@
<label>
{{( pgettext "Check-in Date" "input")}}
<br>
<input name="arrival_date" type="date" required>
<input name="arrival_date" type="date" min="{{ tomorrow }}" required>
<br>
</label>
<label>
{{( pgettext "Check-out Date" "input")}}
<br>
<input name="departure_date" type="date" required>
<input name="departure_date" type="date" min="{{ overmorrow }}">
<br>
</label>
</fieldset>
@ -163,33 +163,6 @@
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>
<script src="/static/booking-dates.js?v={{ camperVersion }}"></script>
{{- end }}