Examples

Working examples showing different configurations and use cases

⚛️

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

import { useEffect, useRef } from "react";
import { TimepickerUI } from "timepicker-ui";

export default function BasicTimePicker() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!inputRef.current) return;
    const picker = new TimepickerUI(inputRef.current);
    picker.create();
    return () => picker.destroy();
  }, []);

  return <input ref={inputRef} type="text" placeholder="Select time" />;
}

Clock Format

24-Hour Format

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

import { useEffect, useRef } from "react";
import { TimepickerUI } from "timepicker-ui";

export default function Clock24Example() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!inputRef.current) return;
    const picker = new TimepickerUI(inputRef.current, {
      clockType: "24h",
    });
    picker.create();
    return () => picker.destroy();
  }, []);

  return <input ref={inputRef} type="text" />;
}

Theming

Dark Theme

Apply dark theme for better visual hierarchy

import { useEffect, useRef } from "react";
import { TimepickerUI } from "timepicker-ui";
import "timepicker-ui/theme-dark.css";

export default function DarkThemeExample() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!inputRef.current) return;
    const picker = new TimepickerUI(inputRef.current, {
      theme: "dark",
    });
    picker.create();
    return () => picker.destroy();
  }, []);

  return <input ref={inputRef} type="text" />;
}

Callbacks

Handle Time Selection

React to user actions with callback functions

import { useEffect, useRef, useState } from "react";
import { TimepickerUI } from "timepicker-ui";

export default function CallbackExample() {
  const inputRef = useRef<HTMLInputElement>(null);
  const [selectedTime, setSelectedTime] = useState("");

  useEffect(() => {
    if (!inputRef.current) return;
    const picker = new TimepickerUI(inputRef.current, {
      onConfirm: (data) => {
        const time = `${data.hour}:${data.minutes}${data.type ? " " + data.type : ""}`;
        setSelectedTime(time);
      },
    });
    picker.create();
    return () => picker.destroy();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" />
      {selectedTime && <p>Selected: {selectedTime}</p>}
    </div>
  );
}

Increments

Custom Minute Steps

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

import { useEffect, useRef } from "react";
import { TimepickerUI } from "timepicker-ui";

export default function IncrementExample() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!inputRef.current) return;
    const picker = new TimepickerUI(inputRef.current, {
      incrementMinutes: 15,
    });
    picker.create();
    return () => picker.destroy();
  }, []);

  return <input ref={inputRef} type="text" />;
}

Restrictions

Disabled Time Ranges

Prevent selection of specific hours or time intervals

import { useEffect, useRef } from "react";
import { TimepickerUI } from "timepicker-ui";

export default function DisabledTimeExample() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!inputRef.current) return;
    const picker = new TimepickerUI(inputRef.current, {
      disabledTime: {
        interval: "12:00 PM - 1:00 PM",
      },
    });
    picker.create();
    return () => picker.destroy();
  }, []);

  return <input ref={inputRef} type="text" />;
}