Examples

Working configurations you can copy into your project.

Demos run inline so you can try them right away. In your app the picker opens in a modal when the input is clicked. Switch a demo to Modal to see that.

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

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

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

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

Callbacks

#

Handle Time Selection

React to user actions with callback functions

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)

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 ranges

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          ranges: "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}