Examples

Working configurations you can copy into your project.

React examples

These examples use React and Next.js, but TimepickerUI works with any JavaScript framework or vanilla JS. The same API is available in Vue, Angular, Svelte, or plain JavaScript. Check the Quick Start guide for framework-specific examples.

Basic Usage

Default Timepicker

Simple time picker with default settings

index.tsxtsx

1import { useEffect, useRef } from "react";
2import { TimepickerUI } from "timepicker-ui";
3
4export default function BasicTimePicker() {
5  const inputRef = useRef<HTMLInputElement>(null);
6
7  useEffect(() => {
8    if (!inputRef.current) return;
9    const picker = new TimepickerUI(inputRef.current);
10    picker.create();
11    return () => picker.destroy();
12  }, []);
13
14  return <input ref={inputRef} type="text" placeholder="Select time" />;
15}

Clock Format

24-Hour Format

Use 24-hour clock instead of 12-hour with AM/PM

index.tsxtsx

1import { useEffect, useRef } from "react";
2import { TimepickerUI } from "timepicker-ui";
3
4export default function Clock24Example() {
5  const inputRef = useRef<HTMLInputElement>(null);
6
7  useEffect(() => {
8    if (!inputRef.current) return;
9    const picker = new TimepickerUI(inputRef.current, {
10      clock: { type: "24h" },
11    });
12    picker.create();
13    return () => picker.destroy();
14  }, []);
15
16  return <input ref={inputRef} type="text" />;
17}

Theming

Dark Theme

Apply dark theme for better visual hierarchy

index.tsxtsx

1import { useEffect, useRef } from "react";
2import { TimepickerUI } from "timepicker-ui";
3import "timepicker-ui/theme-dark.css";
4
5export default function DarkThemeExample() {
6  const inputRef = useRef<HTMLInputElement>(null);
7
8  useEffect(() => {
9    if (!inputRef.current) return;
10    const picker = new TimepickerUI(inputRef.current, {
11      ui: { theme: "dark" },
12    });
13    picker.create();
14    return () => picker.destroy();
15  }, []);
16
17  return <input ref={inputRef} type="text" />;
18}

Callbacks

Handle Time Selection

React to user actions with callback functions

index.tsxtsx

1import { useEffect, useRef, useState } from "react";
2import { TimepickerUI } from "timepicker-ui";
3
4export default function CallbackExample() {
5  const inputRef = useRef<HTMLInputElement>(null);
6  const [selectedTime, setSelectedTime] = useState("");
7
8  useEffect(() => {
9    if (!inputRef.current) return;
10    const picker = new TimepickerUI(inputRef.current, {
11      callbacks: {
12        onConfirm: (data) => {
13          const time = `${data.hour}:${data.minutes}${data.type ? " " + data.type : ""}`;
14          setSelectedTime(time);
15        },
16      },
17    });
18    picker.create();
19    return () => picker.destroy();
20  }, []);
21
22  return (
23    <div>
24      <input ref={inputRef} type="text" />
25      {selectedTime && <p>Selected: {selectedTime}</p>}
26    </div>
27  );
28}

Increments

Custom Minute Steps

Allow only specific minute intervals (e.g., 15-minute increments)

index.tsxtsx

1import { useEffect, useRef } from "react";
2import { TimepickerUI } from "timepicker-ui";
3
4export default function IncrementExample() {
5  const inputRef = useRef<HTMLInputElement>(null);
6
7  useEffect(() => {
8    if (!inputRef.current) return;
9    const picker = new TimepickerUI(inputRef.current, {
10      clock: { incrementMinutes: 15 },
11    });
12    picker.create();
13    return () => picker.destroy();
14  }, []);
15
16  return <input ref={inputRef} type="text" />;
17}

Restrictions

Disabled Time Ranges

Prevent selection of specific hours or time intervals

index.tsxtsx

1import { useEffect, useRef } from "react";
2import { TimepickerUI } from "timepicker-ui";
3
4export default function DisabledTimeExample() {
5  const inputRef = useRef<HTMLInputElement>(null);
6
7  useEffect(() => {
8    if (!inputRef.current) return;
9    const picker = new TimepickerUI(inputRef.current, {
10      clock: {
11        disabledTime: {
12          interval: "12:00 PM - 1:00 PM",
13        },
14      },
15    });
16    picker.create();
17    return () => picker.destroy();
18  }, []);
19
20  return <input ref={inputRef} type="text" />;
21}