Multiple Pickers

Use multiple timepickers with independent state

Independent Pickers

Each timepicker manages its own state:

Time Range Selector

Start and end time with separate state

Start Time

End Time

Start: 9:00 AM

End: 5:00 PM

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

function App() {
  const [startTime, setStartTime] = useState("9:00 AM");
  const [endTime, setEndTime] = useState("5:00 PM");

  return (
    <div>
      <label>Start Time</label>
      <Timepicker
        value={startTime}
        onUpdate={(data) => {
          setStartTime(`${data.hour}:${data.minutes} ${data.type}`);
        }}
      />

      <label>End Time</label>
      <Timepicker
        value={endTime}
        onUpdate={(data) => {
          setEndTime(`${data.hour}:${data.minutes} ${data.type}`);
        }}
      />
      
      <p>Range: {startTime} - {endTime}</p>
    </div>
  );
}