Timepicker-UI

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

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


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


  return (
    <div>
      <Timepicker
        value={time}
        onUpdate={(data) => {
          setTime(`${data.hour}:${data.minutes} ${data.type}`);
        }}
      />
      <p>Current value: {time}</p>
      <button onClick={() => setTime("3:30 PM")}>
        Set to 3:30 PM
      </button>
    </div>
  );
}

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