Time Picker
FormTime selection with hour and minute inputs.
Preview
Usage
example.jsx
import { TimePicker } from "@/components/ui/time-picker";
export default function Example() {
return <TimePicker />;
}Source Code
Copy this file into components/ui/time-picker.jsx in your project.
time-picker.jsx
"use client";
import { forwardRef } from "react";
import { cn } from "@/lib/utils";
const TimePicker = forwardRef(({ className, ...props }, ref) => {
return (
<input
ref={ref}
type="time"
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
"disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
);
});
TimePicker.displayName = "TimePicker";
export { TimePicker };
Quick Install
Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.
npm install clsx tailwind-merge