Skip to content
timepicker-ui
React · Callbacks

onConfirm

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
import { Timepicker } from "timepicker-ui-react";
import { useState } from "react";


function App() {
  const [confirmedTime, setConfirmedTime] = useState("");


  return (
    <div>
      <Timepicker
        onConfirm={(data) => {
          setConfirmedTime(`${data.hour}:${data.minutes} ${data.type}`);
        }}
      />
      {confirmedTime && <p>Confirmed: {confirmedTime}</p>}
    </div>
  );
}

Event Data

The onConfirm callback receives an object with selected time:

index.tstypescript
interface ConfirmEventData {
  hour?: string;         // e.g., "03", "15"
  minutes?: string;      // e.g., "30", "00"
  type?: string;         // "AM" or "PM", only in 12h mode
  autoCommit?: boolean;  // true when wheel.commitOnScroll confirmed it
}


onConfirm={(data) => {
  console.log(data.hour);     // "03"
  console.log(data.minutes);  // "30"
  console.log(data.type);     // "PM"
}}