The UniversalDatePicker is a powerful and flexible date selection component designed to cover a wide range of use cases in a single, unified interface. It combines the simplicity of single-date selection with the versatility of range selection, while also offering quick-access presets like “Last 7 days,” “Last Month,” or “This Year” for efficiency. To make navigation effortless, it includes a year-selection card for jumping across years quickly, and can easily be extended to support month selection. Built entirely with shadcn/ui and React DayPicker, it provides a modern, accessible, and user-friendly experience that adapts seamlessly to dashboards, analytics, booking systems, and any application where robust date handling is essential. The UniversalDatePicker delivers both convenience and clarity, ensuring users can select dates with confidence and precision.
"use client";
import { Card } from "@/components/ui/card";
import { UniversalDatePicker } from "@/components/ui/universal-date-picker";
export default function UniversalDatePickerDemo() {
return (
<div className="flex min-h-[80vh] items-center justify-center p-6">
<Card className="p-6 max-w-lg w-full space-y-4 shadow-none border-none">
<h2 className="text-lg font-semibold">Date Picker Demo</h2>
<p className="text-sm text-muted-foreground">
This date picker supports single and range modes, quick presets, and year selection.
</p>
<UniversalDatePicker />
</Card>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.