From f0b2b7c8b374dcd8be590f17c91522c6403cb394 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Tue, 28 Jan 2025 17:43:26 -0800
Subject: [PATCH] Re-work datetime input

---
 src/app.css                             | 15 ++++--
 src/app/components/EventCreate.svelte   | 22 ++++----
 src/lib/components/DateTimeInput.svelte | 72 +++++++++++++++++++------
 3 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/src/app.css b/src/app.css
index 69fb7b12..7d901dfb 100644
--- a/src/app.css
+++ b/src/app.css
@@ -294,11 +294,20 @@ html {
 
 /* date input */
 
-.date-time-field {
-  @apply input input-bordered rounded px-0;
+.picker {
+  --date-picker-foreground: var(--base-content);
+  --date-picker-background: var(--base-300);
+  --date-picker-highlight-border: var(--primary);
+  --date-picker-selected-color: var(--primary-content);
+  --date-picker-selected-background: var(--primary);
 }
+
+.date-time-field {
+  @apply input input-bordered rounded-lg px-0;
+}
+
 .date-time-field input {
-  @apply !h-full !w-full !border-none !bg-inherit !text-inherit;
+  @apply !h-full !w-full !rounded-lg !border-none !bg-inherit !px-4 !text-inherit;
 }
 
 /* emoji picker */
diff --git a/src/app/components/EventCreate.svelte b/src/app/components/EventCreate.svelte
index 9b455c7f..5cd67da7 100644
--- a/src/app/components/EventCreate.svelte
+++ b/src/app/components/EventCreate.svelte
@@ -105,17 +105,19 @@
     {/snippet}
   </Field>
   <Field>
+    {#snippet label()}
+      Start
+    {/snippet}
     {#snippet input()}
-      <div class="grid grid-cols-2 gap-2">
-        <div class="flex flex-col gap-1">
-          <strong>Start</strong>
-          <DateTimeInput bind:value={start} />
-        </div>
-        <div class="flex flex-col gap-1">
-          <strong>End</strong>
-          <DateTimeInput bind:value={end} />
-        </div>
-      </div>
+      <DateTimeInput bind:value={start} />
+    {/snippet}
+  </Field>
+  <Field>
+    {#snippet label()}
+      End
+    {/snippet}
+    {#snippet input()}
+      <DateTimeInput bind:value={end} />
     {/snippet}
   </Field>
   <Field>
diff --git a/src/lib/components/DateTimeInput.svelte b/src/lib/components/DateTimeInput.svelte
index 23dadc42..a207e423 100644
--- a/src/lib/components/DateTimeInput.svelte
+++ b/src/lib/components/DateTimeInput.svelte
@@ -11,29 +11,67 @@
   let {initialValue = undefined, value = $bindable<Date | undefined>(initialValue)}: Props =
     $props()
 
-  const init = () => {
-    if (!value) {
-      value = new Date()
-      value.setMinutes(0, 0, 0)
+  const pad = (n: number) => ("00" + String(n)).slice(-2)
+
+  const defaultTime = `${pad(new Date().getHours())}:00`
+
+  const focusDate = () => element.querySelector("input")?.focus()
+
+  const syncTime = (d: Date) => {
+    if (!time) {
+      time = defaultTime
+    }
+
+    const [hours, minutes] = time.split(":").map(x => parseInt(x))
+
+    d.setHours(hours, minutes, 0, 0)
+
+    return d
+  }
+
+  const onChange = () => {
+    if (value) {
+      value = syncTime(value)
     }
   }
 
   const clear = () => {
     value = undefined
+    time = ""
+  }
+
+  let time = ""
+  let element: HTMLElement
+
+  $: {
+    if (value) {
+      value = syncTime(value)
+    }
   }
 </script>
 
-<Button class="relative" onclick={init}>
-  <DateInput format="yyyy-MM-dd HH:mm" timePrecision="minute" placeholder="" bind:value />
-  <div class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2">
-    {#if value}
-      <Button onclick={clear} class="h-5">
-        <Icon icon="close-circle" />
-      </Button>
-    {:else}
-      <Button class="h-5">
-        <Icon icon="calendar-minimalistic" />
-      </Button>
-    {/if}
+<div class="relative grid grid-cols-2 gap-2" bind:this={element}>
+  <div class="relative">
+    <DateInput format="yyyy-MM-dd" placeholder="" bind:value on:change={onChange} />
+    <div class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2">
+      {#if value}
+        <Button on:click={clear} class="h-5">
+          <Icon icon="close-circle" />
+        </Button>
+      {:else}
+        <Button on:click={focusDate} class="h-5">
+          <Icon icon="calendar-minimalistic" />
+        </Button>
+      {/if}
+    </div>
   </div>
-</Button>
+  <label class="input input-bordered flex items-center">
+    <input
+      list="time-options"
+      class="grow"
+      type="time"
+      step="300"
+      bind:value={time}
+      on:change={onChange} />
+  </label>
+</div>