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.

pkg/template/render.go

@@ -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)
 		},

web/static/booking-dates.js

@@ -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);
+})();

web/templates/public/booking.gohtml

@@ -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 }}

web/templates/public/campsite/type.gohtml

@@ -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 }}