Date Picker
FormCalendar-based date selection input.
Preview
Usage
example.jsx
import { DatePicker } from "@/components/ui/date-picker";
export default function Example() {
return <DatePicker />;
}Source Code
Copy this file into components/ui/date-picker.jsx in your project.
date-picker.jsx
"use client";
import { forwardRef } from "react";
import { cn } from "@/lib/utils";
const DatePicker = forwardRef(({ className, ...props }, ref) => {
return (
<input
ref={ref}
type="date"
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}
/>
);
});
DatePicker.displayName = "DatePicker";
export { DatePicker };
Quick Install
Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.
npm install clsx tailwind-merge