Time Picker Svelte

Svelte Time Picker: Customizable and Accessible Time Selection

This Svelte Time Picker component, adapted from the React TimePickerInput, offers a customizable and accessible solution for time selection in your applications. It leverages svelte-shadcn components for a seamless experience with the shadcn/ui framework but can also be used as a versatile headless component. Designed for SvelteKit projects, it provides keyboard navigation and mobile-optimized interactions, ensuring a user-friendly experience across devices.

Features:

• Keyboard Navigation: Supports intuitive arrow key navigation for selecting hours, minutes, and seconds.
• Mobile Input Optimization: Enhances keyboard interactions on mobile devices for a smoother time input experience.
• Shadcn/UI Compatibility: Designed for seamless integration with the shadcn/ui framework using svelte-shadcn components.
• Versatile Headless Mode: Can be used as a headless component, offering flexibility for custom styling and integration (with minor code adjustments).
• Svelte 4 & Svelte 5 Support: Fully compatible with both Svelte version 4 and the newer Svelte 5 (runes).
• AM/PM Period Selection: Includes an optional select component for choosing AM/PM in 12-hour formats.
• Date & Time Picker Integration: Demonstrates how to combine with Calendar and Popover components for a complete date and time selection solution.
• Internationalized Date Logic: Leverages "@internationalized/date" for robust and locale-aware date/time manipulations.
• SvelteKit Project Focus: Optimized for use within SvelteKit applications, with clear installation steps.
• Snippet-Based Usage: Implemented by copying core component (time-picker-input.svelte) and utility (time-picker-utils.ts) snippets into your project.
• Customizable Time Segment Display: Allows configuration of how time segments (hours, minutes, seconds) are displayed, for example, with labels or dotted separators.
• Direct Time Value Binding: Supports Svelte's binding capabilities for easy state management of time values.

Summary:

This Svelte component provides a flexible TimePicker, adaptable for projects using shadcn/ui or requiring a headless solution. It features keyboard navigation, mobile-friendly input, and options for 12/24 hour formats. Developers can easily integrate it into SvelteKit applications by copying code snippets, offering a customizable and accessible way to handle time input with support for Svelte 4 and 5, and leveraging "@internationalized/date" for robust date/time operations.