Form State

Manage timepicker as part of form state

Complete Form Example

Integrate timepicker with other form fields:

Event Form

Multiple fields with shared state

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

function App() {
  const [formData, setFormData] = useState({
    name: "",
    startTime: "9:00 AM",
    endTime: "5:00 PM",
    notes: ""
  });

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      console.log(formData);
    }}>
      <input
        value={formData.name}
        onChange={(e) => 
          setFormData({ ...formData, name: e.target.value })
        }
      />

      <Timepicker
        value={formData.startTime}
        onUpdate={(data) => {
          setFormData({
            ...formData,
            startTime: `${data.hour}:${data.minutes} ${data.type}`
          });
        }}
      />

      <Timepicker
        value={formData.endTime}
        onUpdate={(data) => {
          setFormData({
            ...formData,
            endTime: `${data.hour}:${data.minutes} ${data.type}`
          });
        }}
      />

      <button type="submit">Submit</button>
    </form>
  );
}