Date Picker

Forms

About

A themeable calendar date picker supporting single, multiple, and range date selection, built on Ark UI's headless date-picker state machine.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Date Picker to your project and fits it to your theme.

Code

How Date Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}