Date Range Picker

The same calendar month grid as Date Picker, a real <table> of real <button> days, but tracking two endpoints instead of one. The first click starts a range, the second click completes it; clicking again after that starts a new range from scratch.

import { useState } from "react";
import { DateRangePicker } from "@kernelui-lib/react";
import type { DateRange } from "@kernelui-lib/react";

function Example() {
  const [range, setRange] = useState<DateRange>({});

  return <DateRangePicker value={range} onValueChange={setRange} />;
}

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

<DateRangePicker value={range} onValueChange={setRange} />

<kernel-date-range-picker></kernel-date-range-picker>

Props

Accessibility

• Previous/next month controls are real <button>s with aria-labels ("Previous month", "Next month"), since their icons carry no accessible name on their own.
• Both range endpoints get aria-selected="true"; today's date gets a distinct dot indicator rather than being conflated with a selected state.
• The in-progress hover preview between the start of a range and the pointer is a purely visual affordance, it never fires onValueChange, so it can't be mistaken for a committed selection by assistive tech following the live value.
• Days outside minDate/maxDate are real disabled buttons, not just dimmed text.
• Days outside the displayed month render as non-interactive dimmed text, they aren't selectable without first navigating to that month.
• Arrow Left/Right/Up/Down, Home, and End move focus between the day buttons currently rendered in the grid; Home/End jump to the start/end of the focused day's week. Crossing into the next or previous month still requires the month navigation buttons, arrow keys don't auto-page the calendar.