Date Picker

A calendar month is a genuine grid, rows of weeks, columns of days of the week, so it's a real <table>, not a <div> grid pretending to be one. Each day is a real <button>; the selected one gets aria-selected="true".

import { useState } from "react";
import { DatePicker } from "@kernelui-lib/react";

function BookingDate() {
  const [date, setDate] = useState<Date>();

  return <DatePicker value={date} onValueChange={setDate} minDate={new Date()} />;
}

Playground

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

<DatePicker value={date} onValueChange={setDate} />

<kernel-date-picker></kernel-date-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.
• The selected day gets aria-selected="true"; today's date gets a distinct dot indicator rather than being conflated with the selected state.
• 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.