Skip to content
timepicker-ui
React · Controlled

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

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

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

7  return (
8    <div>
9      <Timepicker
10        onUpdate={(data) => {
11          setLiveTime(`${data.hour}:${data.minutes} ${data.type || ""}`);
12        }}
13      />
14      <p>Live value: {liveTime}</p>
15    </div>
16  );
17}

onUpdate vs onConfirm

Choose the right event for your use case:

EventWhen it firesUse case
onUpdateEvery time changeLive preview, real-time sync
onConfirmOK button clickForm submission, final value