Time Picker
Single time and range selection with 12h/24h formats
Basic Usage (24h)
09:30
12-Hour Format
02:00 PM
Time Range
09:00 - 17:00 (8h 0m)
Minute Intervals
Minutes increment by 15
Real-World Example
Medical Appointment
Select your preferred appointment time
Work Schedule Example
Work Schedule
Set your daily working hours
Use Cases
📅Appointment Booking
⏰Work Schedules
⏱️Event Timers
🔍Time Filters
Type Definitions
API Reference - TimePicker
| Name | Type | Default | Description |
|---|---|---|---|
time | Time | — | Controlled time value ({ hours: number, minutes: number }) |
onTimeChange | (time: Time | undefined) => void | — | Callback when time changes |
placeholder | string | — | Placeholder text in English |
placeholderAr | string | — | Placeholder text in Arabic |
disabled | boolean | false | Disable the picker |
format | '12h' | '24h' | '24h' | 12-hour or 24-hour time format |
minuteStep | number | 1 | Minutes increment step |
formatTime | (time: Time | undefined, format: "12h" | "24h", locale: "en" | "ar") => string | — | Custom time formatter |
API Reference - TimeRangePicker
| Name | Type | Default | Description |
|---|---|---|---|
timeRange | TimeRange | — | Controlled time range ({ from: Time, to: Time }) |
onTimeRangeChange | (range: TimeRange | undefined) => void | — | Callback when range changes |
placeholder | string | — | Placeholder text in English |
placeholderAr | string | — | Placeholder text in Arabic |
disabled | boolean | false | Disable the picker |
format | '12h' | '24h' | '24h' | 12-hour or 24-hour time format |
minuteStep | number | 1 | Minutes increment step |
formatTimeRange | (range: TimeRange | undefined, format: "12h" | "24h", locale: "en" | "ar") => string | — | Custom range formatter |
Features
- 12-hour and 24-hour formats
- AM/PM toggle
- Time range selection
- Customizable minute intervals
- Quick action buttons (Now, Clear)
- Integrated number controls
- Customizable formatting
- Bilingual support
- RTL/LTR support
- Full accessibility