https://github.com/1bye/time-picker-svelte
A lightweight and customizable TimePicker component built with Svelte, designed for seamless integration with the shadcn/ui framework or as a versatile headless component for your projects
https://github.com/1bye/time-picker-svelte
svelte time-picker
Last synced: 6 months ago
JSON representation
A lightweight and customizable TimePicker component built with Svelte, designed for seamless integration with the shadcn/ui framework or as a versatile headless component for your projects
- Host: GitHub
- URL: https://github.com/1bye/time-picker-svelte
- Owner: 1bye
- License: mit
- Created: 2024-12-27T11:42:25.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-06-16T10:16:15.000Z (9 months ago)
- Last Synced: 2025-06-16T11:28:30.705Z (9 months ago)
- Topics: svelte, time-picker
- Language: Svelte
- Homepage: https://time-picker.nouro.app/
- Size: 178 KB
- Stars: 20
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shadcnui - Github - picker.nouro.app/) | ★20 | (Components & Libraries)
README
> [!TIP]
> Now time picker works with Svelte 4 and Svelte 5 as shadcn or headless!
# Time Picker Component for Svelte
This project is a Svelte adaptation of the [TimePickerInput](https://time.openstatus.dev/) component, originally built with React and Shadcn UI. The Svelte version utilizes [svelte-shadcn](https://next.shadcn-svelte.com/docs/installation/sveltekit) 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](https://time-picker.nouro.app/)
- **REPL playground**: [link](https://www.sveltelab.dev/zjcmgpaa2tzlylx)
## 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](https://www.npmjs.com/package/bits-ui)
- [@internationalized/date](https://www.npmjs.com/package/@internationalized/date)
Additionally, install the necessary svelte-shadcn components:
- Input (required)
- Label (optional, for [time-picker.svelte](./src/lib/snippets/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**:
```bash
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**:
```bash
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**:
```bash
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`](./src/lib/snippets/shadcn-svelte-runes/time-picker-input.svelte) and [`time-picker-utils.ts`](./src/lib/snippets/shadcn-svelte-runes/time-picker-utils.ts) into your project. (For example into `$lib/components/ui/time-picker`)
### Steps to Install (Headless)
1. **Install dependencies**:
```bash
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`](./src/lib/snippets/svelte-runes/time-picker-input.svelte) and [`time-picker-utils.ts`](./src/lib/snippets/svelte-runes/time-picker-utils.ts) into your project. (For example into `$lib/components/ui/time-picker`)
## Usage
After installation, you can [copy snippets](./src/lib/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](https://time.openstatus.dev/) by OpenStatus and utilizes components from [svelte-shadcn](https://next.shadcn-svelte.com/docs/installation/sveltekit).
Special thanks to the contributors of these projects for their excellent work.