Skip to content
timepicker-ui
React · Callbacks

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

-

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

4function App() {
5  const [lastHour, setLastHour] = useState("");
6  const [lastMinute, setLastMinute] = useState("");
7  const [period, setPeriod] = useState("");
8

9  return (
10    <Timepicker
11      onSelectHour={(data) => setLastHour(data.hour)}
12      onSelectMinute={(data) => setLastMinute(data.minutes)}
13      onSelectAM={() => setPeriod("AM")}
14      onSelectPM={() => setPeriod("PM")}
15    />
16  );
17}

Event Data Structure

index.tstypescript
1// onSelectHour
2interface HourSelectData {
3  hour: string;
4  degreesHours: number;
5}
6

7// onSelectMinute
8interface MinuteSelectData {
9  minutes: string;
10  degreesMinutes: number;
11}
12

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