diff --git a/package.json b/package.json
index b248ebd..6cb686e 100644
--- a/package.json
+++ b/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"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a9bdb4..1f26297 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   flatpickr_plus:
-    specifier: ^1.1.10
-    version: 1.1.10
+    specifier: ^1.1.12
+    version: 1.1.12
   postcss:
     specifier: ^8.4.31
     version: 8.4.31
@@ -930,8 +930,8 @@ packages:
       rimraf: 3.0.2
     dev: true
 
-  /flatpickr_plus@1.1.10:
-    resolution: {integrity: sha512-znrzlS/0v62blI4goG/1ytYL2uTrYbRqpKLeT+ZvA9uHWhjyTYhZFOVGUO24spBKuayvyNFSgqUtqHRktC/GgA==}
+  /flatpickr_plus@1.1.12:
+    resolution: {integrity: sha512-L49uLgKa1dkDDxe2mtzU2f0Sbi1pkehTwcgcbVJrtjdvAb8oXV3PkQs9gkjIDGkvsYPoC72noxiHgrOoXt91fg==}
     dev: false
 
   /flatted@3.2.7:
diff --git a/src/app.css b/src/app.css
index 91839e3..b2a8fe8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -82,7 +82,7 @@ tr:hover {
 }
 .details section details {
 	cursor: pointer;
-	padding-top: 1rem;
+	margin-top: 1rem;
 }
 
 .details section summary {
diff --git a/src/lib/actions.js b/src/lib/actions.js
index 82e6163..b0ea502 100644
--- a/src/lib/actions.js
+++ b/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) {
diff --git a/src/routes/datepicker/+page.svelte b/src/routes/datepicker/+page.svelte
index 657e1df..4a44432 100644
--- a/src/routes/datepicker/+page.svelte
+++ b/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>