Timepicker-UI

Modern Time Picker for
Web Applications

A lightweight, accessible, and highly customizable time picker component with beautiful themes and mobile-first design.

React wrapper available
Get Started
New: Version 4.0.0 is here with grouped options & better TypeScript!

Everything you need

Packed with features to build modern time pickers

10 Built-in Themes

Material, Crane, Dark, Glassmorphic, Cyberpunk, AI, and more

Mobile-First Design

Responsive with touch and keyboard support

Framework Agnostic

Works with vanilla JS, React, Vue, Angular, and others

TypeScript Support

Full type definitions and IntelliSense

Inline Mode

Always-visible timepicker without modal overlay

Rich API

Comprehensive methods and event system

Accessible

ARIA-compliant with keyboard navigation

SSR Compatible

Works with Next.js, Nuxt, and other SSR frameworks

Lightweight

Minimal footprint with tree-shaking support

See it in action

Try the timepicker right here with different configurations

Basic Example

Default configuration with 12-hour format

Mobile Mode

Optimized for touch devices with mobile view

Explore more examples

Quick to integrate

Get started in seconds with simple installation and minimal configuration.

  • Install via npm, yarn, or pnpm
  • Works with any JavaScript framework
  • Comprehensive TypeScript support
  • Extensive documentation and examples
Read documentation
# Install
npm install timepicker-ui

# Import and use
import { TimepickerUI } from 'timepicker-ui';

const input = document
  .querySelector('#timepicker');

const picker = new TimepickerUI(input);
picker.create();

Advanced Features

Powerful capabilities for complex requirements

Disabled Time Ranges

Disable specific hours, minutes, or time intervals with flexible configuration

Learn more

12h/24h Formats

Support for both 12-hour and 24-hour clock formats with automatic switching

Learn more

Extensive Configuration

25+ options to customize behavior, labels, animations, and more

Learn more

Custom Styling

Override CSS variables or create completely custom themes

Learn more

Localization

Customize all labels and text for international applications

Learn more

Instance Management

Create multiple pickers with getById(), destroyAll(), and custom IDs

Learn more

Ready to get started?

Install timepicker-ui and start building beautiful time pickers today.

Get Started