Selection Events

Track hour, minute, and AM/PM selections

Individual Selection Callbacks

Listen to specific selection events:

Selection Tracking

See individual hour/minute selections

Hour

Minute

Period

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

function App() {
  const [lastHour, setLastHour] = useState("");
  const [lastMinute, setLastMinute] = useState("");
  const [period, setPeriod] = useState("");

  return (
    <Timepicker
      onSelectHour={(data) => setLastHour(data.hour)}
      onSelectMinute={(data) => setLastMinute(data.minutes)}
      onSelectAM={() => setPeriod("AM")}
      onSelectPM={() => setPeriod("PM")}
    />
  );
}

Event Data Structure

// onSelectHour
interface HourSelectData {
  hour: string;
  degreesHours: number;
}

// onSelectMinute
interface MinuteSelectData {
  minutes: string;
  degreesMinutes: number;
}

// onSelectAM, onSelectPM
// No parameters - just fires when clicked