Introduction

TimePicker and ClockPicker are powerful, flexible React components that provide intuitive time selection interfaces. Built with TypeScript and designed for modern React applications, they offer extensive customization options while maintaining excellent performance and accessibility.

Both components share the same core functionality and API, giving you the choice between a dropdown-style interface (TimePicker) or a visual clock interface (ClockPicker) based on your design requirements.

What you'll learn

In this documentation, you'll learn how to:

•Install and configure TimePicker and ClockPicker with various time formats
•Handle different return types (string, date, number) and value formats
•Customize appearance with extensive className options and styling
•Implement validation and handle time change events
•Control positioning, alignment, and responsive behavior

Core Features

Flexible Format Support

Handle multiple time formats effortlessly. The picker automatically adapts to your preferred time format and lets you configure exactly how times are displayed and returned.

•12-hour format with AM/PM support via is12HourFormat prop. Example: 03:45 PM
•24-hour format for international users or apps requiring military time. Example: 15:45
•Supports multiple time string formats automatically (e.g., “3:45 PM”, “15:45”, 1757680432).
•Configurable AM/PM visibility with showAMPM — hide or show the toggle easily.

Smart Value Handling

The Time Picker intelligently detects and manages different value types. This means less manual conversion and more reliable data handling.

•Auto-detects input values whether they’re string, date object or number timestamps.
•Configurable return type via returnType (string, date, number) so it fits seamlessly into your app logic.
•Built-in validation with isValidTime to ensure only valid times are processed.

Intuitive User Interface

Designed to feel familiar to users and easy for developers. Smoothly handles dynamic content, responsiveness, and accessibility out of the box.

•Smart dropdown positioning with align prop (supports top, bottom, left, right). Automatically adjusts if there’s not enough space.
•Optional action buttons (“Cancel”/“Ok”) with customizable text and styles.
•Custom icon support (e.g., replace default clock icon with your own).
•Fully responsive — adapts to mobile, tablet, and desktop layouts automatically.

Extensive Customization Options

Take full control of the look and feel. Style every part of the picker or integrate it seamlessly into your design system.

•Individual classNames props for each part — input, dropdown, buttons, lists, icons, etc.
•Customizable button text with cancelButtonText and confirmButtonText props.
•Adjustable placeholders, input attributes, and accessibility labels.
•Show/hide action buttons easily with showButtons prop.
•Works with both light and dark themes out of the box — or define your own theme overrides.

Key Benefits

Type Safety

Built with TypeScript for reliable typings, excellent IntelliSense, and compile-time checks across props and internal utilities — which reduces runtime bugs and improves developer DX.

Performance Optimized

Uses React hooks and local state efficiently, avoids unnecessary re-renders, and keeps computations (like list generation and parsing) lightweight so the picker feels snappy even on mobile devices.

Basic Usage Example

Browser Compatibility

Compatible with all modern browsers supporting ES2015+ and React 16.8+:

Browser	Minimum Version
Chrome	60+
Firefox	55+
Safari	12+
Edge	79+

System Requirements

React: 16.8.0 or later (hooks support required)
TypeScript: 4.1 or later (optional, but recommended)
Node.js: 14.0.0 or later for development

Next Steps

Ready to start using TimePicker and ClockPicker in your React application?

Installation →

Learn how to install the package and set up the components in your project.