React · Callbacks
All Events
Listen to all available timepicker events
Complete Event Handling
All events are logged below in real-time:
All Callbacks
Every interaction triggers a callback
Event Log
No events yet. Interact with the timepicker above.
index.tsxtsx
1import { Timepicker } from "timepicker-ui-react";23function App() {4 return (5 <Timepicker6 onOpen={(data) => console.log("Opened:", data)}7 onConfirm={(data) => console.log("Confirmed:", data)}8 onCancel={() => console.log("Cancelled")}9 onUpdate={(data) => console.log("Updated:", data)}10 onSelectHour={(data) => console.log("Hour:", data)}11 onSelectMinute={(data) => console.log("Minute:", data)}12 onSelectAM={() => console.log("AM selected")}13 onSelectPM={() => console.log("PM selected")}14 />15 );16}
Available Events
| Event | Description |
|---|---|
| onOpen | Timepicker modal opened |
| onConfirm | OK button clicked |
| onCancel | Cancel button or backdrop clicked |
| onUpdate | Time value changed |
| onSelectHour | Hour selected on clock |
| onSelectMinute | Minute selected on clock |
| onSelectAM | AM button clicked (12h mode) |
| onSelectPM | PM button clicked (12h mode) |