Add datepicker

This commit is contained in:
philipp lang 2024-02-13 00:55:45 +01:00
parent 32d0b214c8
commit a488383481
10 changed files with 27 additions and 258 deletions

1
.gitignore vendored
View File

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

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

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

64
package-lock.json generated
View File

@ -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",

View File

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

View File

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

View File

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

View File

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