From f4fcb2e7459a8baa767c3f14779e541898ac2c28 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Fri, 14 Mar 2025 00:00:06 +0100
Subject: [PATCH] Lib: Add DateTimeInput

---
 src/lib/components/form/DateTimeInput.svelte | 53 ++++++++++++++++++++
 src/lib/components/index.ts                  |  2 +
 2 files changed, 55 insertions(+)
 create mode 100644 src/lib/components/form/DateTimeInput.svelte

diff --git a/src/lib/components/form/DateTimeInput.svelte b/src/lib/components/form/DateTimeInput.svelte
new file mode 100644
index 0000000..a4b8165
--- /dev/null
+++ b/src/lib/components/form/DateTimeInput.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { format_date, isodateformat, isodatetimeformat, timeformat } from "$lib/date";
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface InputProps extends HTMLInputAttributes {
+    children: Snippet;
+
+    /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
+    labelwidth?: string;
+
+    /** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
+    value?: string;
+  }
+
+  let {
+    children,
+    labelwidth = "auto",
+    value = $bindable(),
+    type = "text",
+    ...restProps
+  }: InputProps = $props();
+
+  // Create separate bindable values for date and time
+  let dateValue: string = $state("");
+  let timeValue: string = $state("");
+
+  // When the parent value changes, update date and time
+  $effect(() => {
+    if (value) {
+      dateValue = format_date(value, isodateformat);
+      timeValue = format_date(value, timeformat);
+    }
+  });
+
+  // When either date or time changes, update the parent value
+  $effect(() => {
+    if (dateValue && timeValue) {
+      value = format_date(`${dateValue}T${timeValue}`, isodatetimeformat);
+    }
+  });
+</script>
+
+<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
+  <div
+    class="input-group-shim select-none text-nowrap border-r text-neutral-900"
+    style="width: {labelwidth};"
+  >
+    {@render children()}
+  </div>
+  <input type="date" bind:value={dateValue} class="!border-r" {...restProps} />
+  <input type="time" bind:value={timeValue} {...restProps} />
+</div>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 370b4b8..9b787e6 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -4,6 +4,7 @@ import LoadingIndicator from "./LoadingIndicator.svelte";
 import Table from "./Table.svelte";
 
 import Button from "./form/Button.svelte";
+import DateTimeInput from "./form/DateTimeInput.svelte";
 import Dropdown from "./form/Dropdown.svelte";
 import Input from "./form/Input.svelte";
 
@@ -35,6 +36,7 @@ export {
 
   // Form
   Button,
+  DateTimeInput,
   Dropdown,
   Input,