[!TIP] Now time picker works with Svelte 4 and Svelte5 as shadcn or headless!

Time Picker Component for Svelte

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.

Features

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

Demo

• Docs/Demo: link
• REPL playground: link

Installation

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)

[!TIP]
Time picker can be used without shadcn, but you should a little change code (few lines)

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)

Steps to Install (shadcn/ui)

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)

Steps to Install (Headless)

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)

Usage

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.

Acknowledgments

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.