Skip to content
timepicker-ui
React · Basic

Getting Started

Simple example to start using timepicker-ui-react

Basic Usage

The simplest way to create a timepicker with default settings:

Basic Timepicker

Default 12-hour format with AM/PM

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

4function App() {
5  return (
6    <Timepicker
7      placeholder="Select time"
8      className="px-4 py-2 rounded-lg border"
9    />
10  );
11}

Installation

Install the package and import required styles:

index.bashbash
1# Install timepicker-ui-react
2npm install timepicker-ui-react
3

4# Import in your component
5import { Timepicker } from "timepicker-ui-react";
6import "timepicker-ui/main.css";

Props

The component extends standard HTML input attributes:

index.tsxtsx
1<Timepicker
2  // Standard input props
3  placeholder="Select time"
4  className="custom-class"
5  disabled={false}
6  required
7  name="appointment-time"
8  
9  // Timepicker-specific props
10  value="12:00 PM"
11  defaultValue="9:00 AM"
12  options={{
13    clock: { type: "12h" },
14    ui: { theme: "basic" }
15  }}
16/>