Mohammad AlHabil

TimePicker

Forms 17

About

A simple and intuitive time picker that lets users easily select hours, minutes, and seconds. It supports both 12-hour (AM/PM) and 24-hour formats, with smooth scrolling and clear options. You can also set minimum and maximum times to guide user input.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds TimePicker to your project and fits it to your theme.

Code

How TimePicker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from 'react'
import { TimePicker } from "@/components/ui/time-picker";

export default function DemoOne() {
  const [value, setValue] = useState(new Date());
  return (
    <TimePicker
      use12HourFormat= { true }
      value = { value }
      onChange = { setValue }
    />
  );
}

Dependencies

More in Forms

View all
  • Premium Auth

    Premium Auth

    524
  • Contact Card

    Contact Card

    1K
  • Book A Demo 1

    Book A Demo 1

    73
  • Login 1

    Login 1

    53
  • Form

    Form

    137
  • Card Studio

    Card Studio

    41
  • SignInPage

    SignInPage

    668
  • Modern & Stunning sign in

    Modern & Stunning sign in

    1.6K