Re-work datetime input

src/app.css

@@ -294,11 +294,20 @@ html {
 
 /* date input */
 
-.date-time-field {
+.picker {
-  @apply input input-bordered rounded px-0;
+  --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 */

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">
+      <DateTimeInput bind:value={start} />
-        <div class="flex flex-col gap-1">
+    {/snippet}
-          <strong>Start</strong>
+  </Field>
-          <DateTimeInput bind:value={start} />
+  <Field>
-        </div>
+    {#snippet label()}
-        <div class="flex flex-col gap-1">
+      End
-          <strong>End</strong>
+    {/snippet}
-          <DateTimeInput bind:value={end} />
+    {#snippet input()}
-        </div>
+      <DateTimeInput bind:value={end} />
-      </div>
     {/snippet}
   </Field>
   <Field>

src/lib/components/DateTimeInput.svelte

@@ -11,29 +11,67 @@
   let {initialValue = undefined, value = $bindable<Date | undefined>(initialValue)}: Props =
     $props()
 
-  const init = () => {
+  const pad = (n: number) => ("00" + String(n)).slice(-2)
-    if (!value) {
+
-      value = new Date()
+  const defaultTime = `${pad(new Date().getHours())}:00`
-      value.setMinutes(0, 0, 0)
+
+  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}>
+<div class="relative grid grid-cols-2 gap-2" bind:this={element}>
-  <DateInput format="yyyy-MM-dd HH:mm" timePrecision="minute" placeholder="" bind:value />
+  <div class="relative">
-  <div class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2">
+    <DateInput format="yyyy-MM-dd" placeholder="" bind:value on:change={onChange} />
-    {#if value}
+    <div class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2">
-      <Button onclick={clear} class="h-5">
+      {#if value}
-        <Icon icon="close-circle" />
+        <Button on:click={clear} class="h-5">
-      </Button>
+          <Icon icon="close-circle" />
-    {:else}
+        </Button>
-      <Button class="h-5">
+      {:else}
-        <Icon icon="calendar-minimalistic" />
+        <Button on:click={focusDate} class="h-5">
-      </Button>
+          <Icon icon="calendar-minimalistic" />
-    {/if}
+        </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>