update: flatpickr_plus dependency

fix: made 'allowInput' default as true
this will made form submit can validating a input
feat: adding readOnly true function in onOpen hook
feat: adding readOnly false and blur function in onClose hook
this two function will made a input like readonly input

package.json

@@ -71,7 +71,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"flatpickr_plus": "^1.1.10",
+		"flatpickr_plus": "^1.1.12",
 		"postcss": "^8.4.31",
 		"postcss-import": "^15.1.0",
 		"svelte-preprocess": "^5.0.4"

src/app.css

@@ -82,7 +82,7 @@ tr:hover {
 }
 .details section details {
 	cursor: pointer;
-	padding-top: 1rem;
+	margin-top: 1rem;
 }
 
 .details section summary {

src/lib/actions.js

@@ -103,7 +103,7 @@ import 'flatpickr_plus/dist/plugins/monthSelect/style.css';
 
 /** @type {Options} */
 const defaultOptions = {
-    allowInput: false,
+    allowInput: true,
     allowInvalidPreload: false,
     altFormat: "F j, Y",
     altInput: false,
@@ -197,6 +197,19 @@ function modifyHooks(opts = {}, node) {
 function attachFlatpickr(node, opts, plugins = opts.noCalendar ? [] : [new yearDropdownPlugin()]) {
     const fp = flatpickr(node, {
         ...opts,
+        onOpen: [
+            function (selectedDates, dateStr, instance) {
+                instance.altInput.setAttribute('readonly', true);
+            },
+            ...opts.onOpen
+        ],
+        onClose: [
+            function (selectedDates, dateStr, instance) {
+                instance.altInput.setAttribute('readonly', false);
+                instance.altInput.blur();
+            },
+            ...opts.onClose
+        ],
         plugins: plugins
     });
     function resetFlatpickr(event) {

src/routes/datepicker/+page.svelte

@@ -429,7 +429,7 @@ const handdleDatepickerBindClick = () => {
 				Time picker with initial hours<a href="#timedatepicker" class="permalink">🔗</a>
 			</h4>
 
-			<input name="timeDatepicker" use:datePicker={timeOptions} readonly />
+			<input name="timeDatepicker" use:datePicker={timeOptions} readonly  />
 		</div>
 		<details>
 			<summary>How to ?</summary>