Time select

[Schmell]

A great addition to the calendars is to be able to select the time as well i.e: dateTime, or just time

[seb-goodman]

For the time being, I've been using Flatpickr which seems to be working well. Bear in mind it doesn't play nicely with a small number of shadcn-svelte components like "sheet" where the default behaviour is to close on an outside click. To fix this, you can track whether Flatpickr is open or not.

<!-- Flatpickr.svelte -->
<script lang="ts">
	import flatpickr from 'flatpickr';
	import 'flatpickr/dist/themes/dark.css';
	import { onMount } from 'svelte';
	import { createEventDispatcher } from 'svelte';

	let ref: HTMLInputElement;

	const dispatch = createEventDispatcher();

	onMount(() => {
		flatpickr(ref, {
			enableTime: true,
			allowInput: true,
			clickOpens: true,
			maxDate: '2030-01-01',
			onOpen: () => {
				dispatch('open');
			},
			onClose: () => {
				dispatch('close');
			}
		});
	});
</script>

<input
	bind:this={ref}
	class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
/>

<!-- src/lib/components/ParentComponent.svelte -->
<script lang="ts">
	import Flatpickr from '$lib/.../Flatpickr.svelte';

	let isFlatpickrOpen = false;

	function handleDatePickerClose() {
		isFlatpickrOpen = false;
	}

	function handleDatePickerOpen() {
		isFlatpickrOpen = true;
	}
</script>

<Sheet.Root closeOnOutsideClick={!isFlatpickrOpen}>
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header>
      <Sheet.Title></Sheet.Title>
      <Sheet.Description></Sheet.Description>
    </Sheet.Header>
   <Flatpickr on:open={handleDatePickerOpen} on:close={handleDatePickerClose} />
  </Sheet.Content>
</Sheet.Root>
<Sheet.Root >

[Schmell]

Hmm. Lots of features, but it does not style very easily.
Maybe i will try it out and see.
Thanks for the suggestion.