Quick Start

Get started with your first timepicker component in minutes

Basic Usage

Import the Timepicker component and CSS, then use it in your React component:

import { Timepicker } from "timepicker-ui-react";
import "timepicker-ui/main.css";

function App() {
  return (
    <Timepicker
      placeholder="Select time"
      onConfirm={(data) => {
        console.log(data.hour, data.minutes, data.type);
      }}
    />
  );
}

Common Patterns

Controlled Component

Manage timepicker value with React state:

import { Timepicker } from "timepicker-ui-react";
import { useState } from "react";

function App() {
  const [time, setTime] = useState("12:00 PM");

  return (
    <Timepicker
      value={time}
      onUpdate={(data) => {
        setTime(`${data.hour}:${data.minutes} ${data.type}`);
      }}
    />
  );
}

With Options

Customize timepicker with options:

<Timepicker
  placeholder="Select time"
  options={{
    clock: { type: "24h" },
    ui: { theme: "dark" }
  }}
  onConfirm={(data) => console.log(data)}
/>

In Forms

Use with form validation:

<form onSubmit={handleSubmit}>
  <Timepicker
    name="appointment-time"
    required
    value={time}
    onUpdate={(data) => {
      setTime(`${data.hour}:${data.minutes} ${data.type}`);
    }}
  />
  <button type="submit">Submit</button>
</form>