Lib: Remove DateTimeInput
This commit is contained in:
@ -1,53 +0,0 @@
|
|||||||
<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>
|
|
@ -4,7 +4,6 @@ import LoadingIndicator from "./LoadingIndicator.svelte";
|
|||||||
import Table from "./Table.svelte";
|
import Table from "./Table.svelte";
|
||||||
|
|
||||||
import Button from "./form/Button.svelte";
|
import Button from "./form/Button.svelte";
|
||||||
import DateTimeInput from "./form/DateTimeInput.svelte";
|
|
||||||
import Dropdown from "./form/Dropdown.svelte";
|
import Dropdown from "./form/Dropdown.svelte";
|
||||||
import Input from "./form/Input.svelte";
|
import Input from "./form/Input.svelte";
|
||||||
|
|
||||||
@ -36,7 +35,6 @@ export {
|
|||||||
|
|
||||||
// Form
|
// Form
|
||||||
Button,
|
Button,
|
||||||
DateTimeInput,
|
|
||||||
Dropdown,
|
Dropdown,
|
||||||
Input,
|
Input,
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user