This project is a Svelte adaptation of the TimePickerInput component, originally built with React and Shadcn UI. The Svelte version utilizes svelte-shadcn components to provide a customizable and accessible time picker for your applications.

• Keyboard Navigation: Supports arrow key navigation for time selection.
• Date Formatting: Formats date values for display.
• Mobile Optimization: Enhances mobile keyboard interactions for time input.

• Docs/Demo: link
• REPL playground: link

Note: This component currently works only with SvelteKit projects. Attempting to set up shadcn-svelte on a Svelte project without SvelteKit may result in issues. (But you can use it as headless)

Before integrating the time picker component, ensure your project includes the following dependencies:

• bits-ui
• @internationalized/date

Additionally, install the necessary svelte-shadcn components:

• Input (required)
• Label (optional, for time-picker.svelte)
• Select (optional, for period selection)
• Calendar (optional, for date and time selection)
• Popover (optional, for date and time selection)
• Button (optional, for date and time selection)

1. Initialize shadcn-svelte in your SvelteKit project:

   npx shadcn-svelte@latest init

   Follow the prompts to configure your project. Ensure you have TypeScript and Tailwind CSS set up, as the command assumes a SvelteKit project with these configurations.

2. Add the required components:

   npx shadcn-svelte@latest add input
   
   # Optional
   npx shadcn-svelte@latest add select label calendar popover

   This command will add the specified components to your project.

3. Install additional dependencies:

   npm install @internationalized/date

   Ensure these packages are added to your package.json and installed in your project.

4. Copy main snippets

   Copy time-picker-input.svelte and time-picker-utils.ts into your project. (For example into $lib/components/ui/time-picker)

1. Install dependencies:

   npm install @internationalized/date

   Ensure these packages are added to your package.json and installed in your project.

2. Copy main snippets

   Copy time-picker-input.svelte and time-picker-utils.ts into your project. (For example into $lib/components/ui/time-picker)

After installation, you can copy snippets and use the time picker components in your Svelte files. (can be without shadcn)

Customize the component as needed to fit your application's requirements.

This component is inspired by the original TimePicker by OpenStatus and utilizes components from svelte-shadcn. Special thanks to the contributors of these projects for their excellent work.