onUpdate Event

React to every time change in real-time

Live Updates

The onUpdate event fires on every time change:

Real-time Updates

See changes as you select hours and minutes

Live value: Not selected

import { Timepicker } from "timepicker-ui-react";
import { useState } from "react";

function App() {
  const [liveTime, setLiveTime] = useState("");

  return (
    <div>
      <Timepicker
        onUpdate={(data) => {
          setLiveTime(`${data.hour}:${data.minutes} ${data.type || ""}`);
        }}
      />
      <p>Live value: {liveTime}</p>
    </div>
  );
}

onUpdate vs onConfirm

Choose the right event for your use case:

Event	When it fires	Use case
`onUpdate`	Every time change	Live preview, real-time sync
`onConfirm`	OK button click	Form submission, final value