Skip to content
timepicker-ui
React · Controlled

Controlled Value

Manage timepicker value with React state

Controlled Component

Use the value prop to control the timepicker:

Controlled Timepicker

Value is managed by React state

Current value: 12:00 PM

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

4function App() {
5  const [time, setTime] = useState("12:00 PM");
6

7  return (
8    <div>
9      <Timepicker
10        value={time}
11        onUpdate={(data) => {
12          setTime(`${data.hour}:${data.minutes} ${data.type}`);
13        }}
14      />
15      <p>Current value: {time}</p>
16      <button onClick={() => setTime("3:30 PM")}>
17        Set to 3:30 PM
18      </button>
19    </div>
20  );
21}

Key Points

  • Use value prop to control the input
  • Use onUpdate to sync state on every change
  • Use onConfirm to sync state only on confirm
  • The component handles internal state synchronization