React · Callbacks

onConfirm

Name: timepicker-ui
Author: Piotr Glejzer

Handle time confirmation when user clicks OK

Confirm Callback

The onConfirm event fires when user clicks the OK button:

Confirmation Handler

Only saves value when confirmed

index.tsxtsx

1import { Timepicker } from "timepicker-ui-react";
2import { useState } from "react";
3
4function App() {
5  const [confirmedTime, setConfirmedTime] = useState("");
6
7  return (
8    <div>
9      <Timepicker
10        onConfirm={(data) => {
11          setConfirmedTime(`${data.hour}:${data.minutes} ${data.type}`);
12        }}
13      />
14      {confirmedTime && <p>Confirmed: {confirmedTime}</p>}
15    </div>
16  );
17}

Event Data

The onConfirm callback receives an object with selected time:

index.tstypescript

1interface ConfirmEventData {
2  hour: string;        // e.g., "3", "15"
3  minutes: string;     // e.g., "30", "00"
4  type?: "AM" | "PM";  // Only in 12h mode
5  degreesHours: number;
6  degreesMinutes: number;
7}
8
9onConfirm={(data) => {
10  console.log(data.hour);     // "3"
11  console.log(data.minutes);  // "30"
12  console.log(data.type);     // "PM"
13}}