A themeable calendar date picker supporting single, multiple, and range date selection, built on Ark UI's headless date-picker state machine.
"use client";
import { DatePicker } from "@/components/ui/date-picker";
import { useEffect } from "react";
import { applyTheme, attachDynamicLight } from "@bysages/core";
function Chevron({ dir }: { dir: "left" | "right" }) {
return (
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
style={dir === "left" ? { transform: "rotate(180deg)" } : undefined}
aria-hidden
>
<path d="m9 5 7 7-7 7" />
</svg>
);
}
function ViewControl() {
return (
<DatePicker.ViewControl>
<DatePicker.PrevTrigger>
<Chevron dir="left" />
</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger>
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger>
<Chevron dir="right" />
</DatePicker.NextTrigger>
</DatePicker.ViewControl>
);
}
function DayView() {
return (
<DatePicker.View view="day">
<DatePicker.Context>
{(dp) => (
<>
<ViewControl />
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
{dp.weekDays.map((day, id) => (
<DatePicker.TableHeader key={id} aria-label={day.long}>
{day.narrow}
</DatePicker.TableHeader>
))}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{dp.weeks.map((week, id) => (
<DatePicker.TableRow key={id}>
{week.map((day, id) => (
<DatePicker.TableCell key={id} value={day}>
<DatePicker.TableCellTrigger>
{day.day}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
);
}
function MonthView() {
return (
<DatePicker.View view="month">
<DatePicker.Context>
{(dp) => (
<>
<ViewControl />
<DatePicker.Table>
<DatePicker.TableBody>
{dp.getMonthsGrid({ columns: 4 }).map((months, id) => (
<DatePicker.TableRow key={id}>
{months.map((month, id) => (
<DatePicker.TableCell key={id} value={month.value}>
<DatePicker.TableCellTrigger>
{month.label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
);
}
function YearView() {
return (
<DatePicker.View view="year">
<DatePicker.Context>
{(dp) => (
<>
<ViewControl />
<DatePicker.Table>
<DatePicker.TableBody>
{dp.getYearsGrid({ columns: 4 }).map((years, id) => (
<DatePicker.TableRow key={id}>
{years.map((year, id) => (
<DatePicker.TableCell key={id} value={year.value}>
<DatePicker.TableCellTrigger>
{year.label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
);
}
export default function InlineCalendarDemo() {
useEffect(() => {
applyTheme({
mode: "light",
accent: "ink",
density: "default",
persist: false,
});
attachDynamicLight();
}, []);
return (
<div className="flex w-full items-start justify-center gap-6 p-10">
<DatePicker.Root inline>
<DayView />
<MonthView />
<YearView />
</DatePicker.Root>
</div>
);
}
