Components
Loading preview...
Weekly Date Picker A compact and interactive component for selecting a date within a weekly view. It supports keyboard navigation, is fully themeable using shadcn/ui variables, and includes a subtle animation for week transitions.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/date-picker// demo.tsx
"use client";
import * as React from "react";
import { WeeklyDatePicker } from "@/components/ui/date-picker";
export default function WeeklyDatePickerDemo() {
const [date, setDate] = React.useState<Date>(new Date());
return (
<div className="flex flex-col items-center justify-center space-y-4 p-4 min-h-[400px]">
<WeeklyDatePicker date={date} setDate={setDate} />
<p className="text-sm text-muted-foreground">
Selected Date:{" "}
<span className="font-semibold text-foreground">
{date.toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</span>
</p>
</div>
);
}