Timepicker

[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.

[Schmell]

Please consider this. would be amazing feature. could easily be rolled into datetime picker.
I know shadcn/ui also does not have this but you could be first this time.
I had images of 2 styles that would be, but the are not available now.
One is like when you set the time on your phone with the clock interface an the the other one is where there is a list of numbers you select
I like both depending on the situation (maybe as variants?), but the clock style one would be 🔥