diff --git a/app/static/css/app.css b/app/static/css/app.css
index bc6d418..f4c2ca9 100644
--- a/app/static/css/app.css
+++ b/app/static/css/app.css
@@ -300,8 +300,25 @@ html[data-theme="dark"] .icon-btn:hover {
   grid-template-columns: 1fr 1fr;
   gap: 0.45rem;
 }
-.datetime-split input {
+.datetime-split .input-with-action > input[type="date"],
+.datetime-split .input-with-action > input[type="time"] {
+  width: 100%;
   min-width: 0;
+  padding-right: 2.75rem;
+  color-scheme: dark;
+}
+html[data-theme="light"] .datetime-split .input-with-action > input[type="date"],
+html[data-theme="light"] .datetime-split .input-with-action > input[type="time"] {
+  color-scheme: light;
+}
+.datetime-split .input-with-action > input[type="date"]::-webkit-calendar-picker-indicator,
+.datetime-split .input-with-action > input[type="time"]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  width: 2.5rem;
+  height: 100%;
+  cursor: pointer;
 }
 .field-label {
   display: block;
diff --git a/app/static/js/create.js b/app/static/js/create.js
index 6cfa0de..3269dee 100644
--- a/app/static/js/create.js
+++ b/app/static/js/create.js
@@ -18,6 +18,8 @@
     maxOpens: document.getElementById("max-opens"),
     availableFromDate: document.getElementById("available-from-date"),
     availableFromTime: document.getElementById("available-from-time"),
+    availableFromDateBtn: document.getElementById("available-from-date-btn"),
+    availableFromTimeBtn: document.getElementById("available-from-time-btn"),
     password: document.getElementById("password"),
     generatePassword: document.getElementById("generate-password"),
     dropzone: document.getElementById("dropzone"),
@@ -595,6 +597,23 @@
     els.password.select();
   });
 
+  function openPicker(input) {
+    if (!input) return;
+    try {
+      if (typeof input.showPicker === "function") {
+        input.showPicker();
+        return;
+      }
+    } catch {
+      /* ignore */
+    }
+    input.focus();
+    input.click();
+  }
+
+  els.availableFromDateBtn?.addEventListener("click", () => openPicker(els.availableFromDate));
+  els.availableFromTimeBtn?.addEventListener("click", () => openPicker(els.availableFromTime));
+
   if (window.WrappedI18n.onChange) {
     window.WrappedI18n.onChange(() => {
       fillTtl();
diff --git a/app/static/js/i18n.js b/app/static/js/i18n.js
index 5295406..4d4601c 100644
--- a/app/static/js/i18n.js
+++ b/app/static/js/i18n.js
@@ -72,6 +72,8 @@
       "create.maxOpensInvalid": "Invalid number of opens.",
       "create.availableFrom": "Available from (optional)",
       "create.availableFromHint": "Empty = available immediately",
+      "create.availableFromDate": "Pick date",
+      "create.availableFromTime": "Pick time",
       "create.availableFromPast": "Available-from must not be in the past.",
       "create.availableFromAfterExpiry": "Available-from must be before expiry.",
       "create.opensBadge": "{n} opens",
diff --git a/app/templates/create.html b/app/templates/create.html
index 9fa7480..255d388 100644
--- a/app/templates/create.html
+++ b/app/templates/create.html
@@ -40,8 +40,22 @@
       <div class="field">
         <span class="field-label" data-i18n="create.availableFrom">Available from (optional)</span>
         <div class="datetime-split">
-          <input id="available-from-date" type="date" aria-label="Date" />
-          <input id="available-from-time" type="time" step="60" aria-label="Time" />
+          <div class="input-with-action">
+            <input id="available-from-date" type="date" aria-label="Date" />
+            <button type="button" class="field-icon-btn" id="available-from-date-btn" aria-describedby="available-from-date-tip">
+              <i class="fa-regular fa-calendar" aria-hidden="true"></i>
+              <span class="sr-only" data-i18n="create.availableFromDate">Pick date</span>
+              <span class="ui-tooltip" id="available-from-date-tip" role="tooltip" data-i18n="create.availableFromDate">Pick date</span>
+            </button>
+          </div>
+          <div class="input-with-action">
+            <input id="available-from-time" type="time" step="60" aria-label="Time" />
+            <button type="button" class="field-icon-btn" id="available-from-time-btn" aria-describedby="available-from-time-tip">
+              <i class="fa-regular fa-clock" aria-hidden="true"></i>
+              <span class="sr-only" data-i18n="create.availableFromTime">Pick time</span>
+              <span class="ui-tooltip" id="available-from-time-tip" role="tooltip" data-i18n="create.availableFromTime">Pick time</span>
+            </button>
+          </div>
         </div>
         <p class="hint" data-i18n="create.availableFromHint">Empty = available immediately</p>
       </div>