Add datepicker

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 .idea
 node_modules
+build/

build/assets/app.dbabec77.js

@@ -1 +0,0 @@
-import{q as r,o as a,V as o}from"./vendor.96758b95.js";r({Datepicker:a,Input:o},!0);

build/manifest.json

@@ -1,16 +0,0 @@
-{
-  "resources/js/app.js": {
-    "file": "assets/app.dbabec77.js",
-    "src": "resources/js/app.js",
-    "isEntry": true,
-    "imports": [
-      "_vendor.96758b95.js"
-    ],
-    "css": [
-      "assets/app.aef28b3b.css"
-    ]
-  },
-  "_vendor.96758b95.js": {
-    "file": "assets/vendor.96758b95.js"
-  }
-}

package-lock.json

@@ -12,7 +12,7 @@
                 "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/typography": "^0.5.0",
                 "dotenv": "^10.0.0",
-                "tw-elements": "^1.1.0"
+                "flowbite": "^2.2.1"
             },
             "devDependencies": {
                 "autoprefixer": "^10.4.0",
@@ -320,19 +320,6 @@
                 "url": "https://github.com/chalk/chalk?sponsor=1"
             }
         },
-        "node_modules/chart.js": {
-            "version": "3.9.1",
-            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
-            "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
-        },
-        "node_modules/chartjs-plugin-datalabels": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
-            "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
-            "peerDependencies": {
-                "chart.js": ">=3.0.0"
-            }
-        },
         "node_modules/chokidar": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -418,27 +405,6 @@
                 "node": ">=4"
             }
         },
-        "node_modules/custom-event-polyfill": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
-            "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
-        },
-        "node_modules/deepmerge": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-            "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/detect-autofill": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/detect-autofill/-/detect-autofill-1.1.4.tgz",
-            "integrity": "sha512-utCBQwCR/beSnADQmBC7C4tTueBBkYCl6WSpfGUkYKO/+MzPxqYGj6G4MvHzcKmH1gCTK+VunX2vaagvkRXPvA==",
-            "dependencies": {
-                "custom-event-polyfill": "^1.0.7"
-            }
-        },
         "node_modules/didyoumean": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -777,6 +743,15 @@
                 "node": ">=8"
             }
         },
+        "node_modules/flowbite": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.2.1.tgz",
+            "integrity": "sha512-iiZyBTtriEDRHrqXZgpKHaxl4B2J8HZUP8Yn1RXozUDKszWHDVj4GxQqMMB9AJHRWOgXV/4E/LJZ/zqQgBUhWA==",
+            "dependencies": {
+                "@popperjs/core": "^2.9.3",
+                "mini-svg-data-uri": "^1.4.3"
+            }
+        },
         "node_modules/foreground-child": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -1144,11 +1119,6 @@
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
-        "node_modules/perfect-scrollbar": {
-            "version": "1.5.5",
-            "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
-            "integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g=="
-        },
         "node_modules/picocolors": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1652,20 +1622,6 @@
             "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
             "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
         },
-        "node_modules/tw-elements": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.1.0.tgz",
-            "integrity": "sha512-IUr9YW2l99oTVZxuVjQg6rpuCpo6VZqbaKGYmZUNVVsoSVU/ljPpkJAY2Pn/morlXwKPhP9MTPNQMlWosqHL4w==",
-            "dependencies": {
-                "@popperjs/core": "^2.6.0",
-                "chart.js": "^3.7.1",
-                "chartjs-plugin-datalabels": "^2.0.0",
-                "deepmerge": "^4.2.2",
-                "detect-autofill": "^1.1.3",
-                "perfect-scrollbar": "^1.5.5",
-                "tailwindcss": "3.3.0"
-            }
-        },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -25,6 +25,6 @@
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.0",
         "dotenv": "^10.0.0",
-        "tw-elements": "^1.1.0"
+        "flowbite": "^2.2.1"
     }
 }

partials/anfrage/default.htm

@@ -1,20 +1,3 @@
-<div
-  class="relative mb-3"
-  data-te-datepicker-init
-  data-te-format="dd, mmm, yyyy"
-  data-te-input-wrapper-init>
-  <input
-    type="text"
-    class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
-    placeholder="Select a date" />
-  <label
-    for="floatingInput"
-    class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
-    >Select a date</label
-  >
-</div>
-
-
 <form data-request="anfrage::onSubmit" data-request-flash class="grid grid-cols-[max-content_1fr] gap-x-6 gap-y-2">
     <span>Vorname</span>
     <input type="text" name="firstname" class="border-gray-700 border-2" />
@@ -31,9 +14,14 @@
     <span>Was du sonst noch loswerden willst</span>
     <textarea name="misc" rows="5" class="border-gray-700 border-2"></textarea>
     <span>Gewünschtes Datum</span>
-
+    <div class="relative max-w-sm">
-
+      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-
+         <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
+          </svg>
+      </div>
+      <input datepicker datepicker-autohide  datepicker-format="dd.mm.yyyy" name="date" type="text" class="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 ps-10 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" placeholder="Datum auswählen">
+    </div>
 
     <div class="flex justify-center col-span-full">
         <button class="py-3 px-6 rounded bg-gray-600 text-xl font-bold text-gray-300" type="submit">Absenden</button>

resources/js/app.js

@@ -1,4 +1,4 @@
 import "../css/app.css";
 
-import { Datepicker, Input, initTE } from "tw-elements";
+import "flowbite/dist/flowbite.min.js";
-initTE({ Datepicker, Input }, true);
+import "flowbite/dist/datepicker.js";

tailwind.config.js

@@ -1,10 +1,7 @@
 module.exports = {
-    content: ["./**/*.htm", "./node_modules/tw-elements/dist/js/**/*.js"],
+  content: ["./**/*.htm", "./node_modules/flowbite/**/*.js"],
-    theme: {
+  theme: {
-        extend: {},
+    extend: {},
-    },
+  },
-    plugins: [
+  plugins: [require("@tailwindcss/forms"), require("flowbite/plugin")],
-        require("@tailwindcss/forms"),
-        require("tw-elements/dist/plugin.cjs"),
-    ],
 };