Skip to content
timepicker-ui
React · Basic

With Callbacks

Handle time selection with callback functions

onConfirm Callback

Execute code when user confirms time selection:

Confirm Handler

Shows alert with selected time

index.tsxtsx
1import { Timepicker } from "timepicker-ui-react";
2

3function App() {
4  return (
5    <Timepicker
6      placeholder="Select time"
7      onConfirm={(data) => {
8        alert(`Selected: ${data.hour}:${data.minutes} ${data.type}`);
9      }}
10    />
11  );
12}

Multiple Callbacks

Listen to multiple events:

Open, Confirm, Cancel

Check console (F12) for event logs

index.tsxtsx
1import { Timepicker } from "timepicker-ui-react";
2

3function App() {
4  return (
5    <Timepicker
6      onOpen={(data) => console.log("Opened:", data)}
7      onConfirm={(data) => console.log("Confirmed:", data)}
8      onCancel={() => console.log("Cancelled")}
9    />
10  );
11}