Add datepicker
This commit is contained in:
parent
32d0b214c8
commit
a488383481
|
@ -1,3 +1,4 @@
|
|||
.DS_Store
|
||||
.idea
|
||||
node_modules
|
||||
build/
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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
|
@ -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"
|
||||
}
|
||||
}
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -1,10 +1,7 @@
|
|||
module.exports = {
|
||||
content: ["./**/*.htm", "./node_modules/tw-elements/dist/js/**/*.js"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
require("@tailwindcss/forms"),
|
||||
require("tw-elements/dist/plugin.cjs"),
|
||||
],
|
||||
content: ["./**/*.htm", "./node_modules/flowbite/**/*.js"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("@tailwindcss/forms"), require("flowbite/plugin")],
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue