Add birthday validation

package-lock.json

@@ -11,8 +11,11 @@
             "dependencies": {
                 "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/typography": "^0.5.0",
+                "alpinejs": "^3.13.5",
+                "dayjs": "^1.11.10",
                 "dotenv": "^10.0.0",
-                "flowbite": "^2.2.1"
+                "flowbite": "^2.2.1",
+                "flowbite-datepicker": "^1.2.6"
             },
             "devDependencies": {
                 "autoprefixer": "^10.4.0",
@@ -157,6 +160,27 @@
                 "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
             }
         },
+        "node_modules/@vue/reactivity": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+            "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+            "dependencies": {
+                "@vue/shared": "3.1.5"
+            }
+        },
+        "node_modules/@vue/shared": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+            "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
+        },
+        "node_modules/alpinejs": {
+            "version": "3.13.5",
+            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.5.tgz",
+            "integrity": "sha512-1d2XeNGN+Zn7j4mUAKXtAgdc4/rLeadyTMWeJGXF5DzwawPBxwTiBhFFm6w/Ei8eJxUZeyNWWSD9zknfdz1kEw==",
+            "dependencies": {
+                "@vue/reactivity": "~3.1.1"
+            }
+        },
         "node_modules/ansi-regex": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -405,6 +429,11 @@
                 "node": ">=4"
             }
         },
+        "node_modules/dayjs": {
+            "version": "1.11.10",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+            "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+        },
         "node_modules/didyoumean": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -752,6 +781,14 @@
                 "mini-svg-data-uri": "^1.4.3"
             }
         },
+        "node_modules/flowbite-datepicker": {
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-1.2.6.tgz",
+            "integrity": "sha512-UbU/xXs9HFiwWfL4M1vpwIo8EpS0NUQSOvYnp0Z9u3N118nU7lPFGoUOq7su9d0aOJy9FssXzx1SZwN8MXhE1g==",
+            "dependencies": {
+                "flowbite": "^2.0.0"
+            }
+        },
         "node_modules/foreground-child": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",

package.json

@@ -24,7 +24,10 @@
     "dependencies": {
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.0",
+        "alpinejs": "^3.13.5",
+        "dayjs": "^1.11.10",
         "dotenv": "^10.0.0",
-        "flowbite": "^2.2.1"
+        "flowbite": "^2.2.1",
+        "flowbite-datepicker": "^1.2.6"
     }
 }

partials/anfrage/default.htm

@@ -1,4 +1,6 @@
-<div id="anfrageform">
+<div id="anfrageform" x-data="form">
+
+
     <form data-request="anfrage::onSubmit" data-request-flash class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3">
 
         <div>
@@ -8,7 +10,7 @@
 
         <div>
           <label for="date" class="block text-sm font-medium text-gray-900 dark:text-white">Gewünschtes Datum</label>
-          <input id="date" name="date" datepicker datepicker-autohide  datepicker-format="dd.mm.yyyy" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
+          <input x-model="date" id="date" name="date" datepicker class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
         </div>
 
         <div>
@@ -18,7 +20,7 @@
 
         <div>
           <label for="birthday" class="block text-sm font-medium text-gray-900 dark:text-white">Geburtsdatum</label>
-          <input id="birthday" name="birthday" datepicker datepicker-autohide  datepicker-format="dd.mm.yyyy" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
+          <input x-model="birthday" id="birthday" name="birthday" datepicker class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
         </div>
 
         <div>
@@ -61,6 +63,10 @@
           <textarea id="misc" name="misc" rows="5" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"></textarea>
         </div>
 
+        <div  x-show="isUnder18" class="col-span-full text-sm text-red-900 items-center p-4 border-2 rounded form-group shadow-sm group bg-red-200 border-red-600">
+            <span class="font-bold">Bitte beachte:</span> Bei Veranstaltungen mit nicht volljährigen Veranstaltern (z.B. 18. Geburtstag) muss eine Person über 35 Jahre (z.B. Erziehungsberechtigte*r) durchgehend anwesend sein.
+        </div>
+
         <div class="relative col-span-full">
             <div class="grid grid-cols-1 gap-2">
                 <label for="datenschutz" class="p-0 block leading-none relative flex items-start">

resources/js/app.js

@@ -1,4 +1,40 @@
 import "../css/app.css";
+import Alpine from "alpinejs";
+import Datepicker from "flowbite-datepicker/Datepicker";
+import de from "../../node_modules/flowbite-datepicker/js/i18n/locales/de.js";
+Datepicker.locales.de = de.de;
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+dayjs.extend(customParseFormat);
 
-import "flowbite/dist/flowbite.min.js";
+function initDatepicker(el) {
-import "flowbite/dist/datepicker.js";
+  new Datepicker(el, {
+    autohide: true,
+    format: "dd.mm.yyyy",
+    language: "de",
+    update: true,
+  });
+  el.addEventListener("changeDate", function (event) {
+    event.target.dispatchEvent(new Event("input"));
+  });
+}
+
+document.querySelectorAll("[datepicker]").forEach((el) => initDatepicker(el));
+
+window.Alpine = Alpine;
+Alpine.data("form", () => ({
+  birthday: null,
+  date: null,
+  isUnder18: function () {
+    if (!this.birthday || !this.date) {
+      return false;
+    }
+
+    console.log(dayjs(this.birthday, "DD.MM.YYYY").add(18, "year"));
+    return dayjs(this.birthday, "DD.MM.YYYY")
+      .add(18, "year")
+      .isAfter(dayjs(this.date, "DD.MM.YYYY"));
+  },
+}));
+
+Alpine.start();