Date Picker

An accessible date picker component with calendar view and full keyboard navigation. Implements the ARIA grid pattern with support for min/max dates and disabled dates.

Basic Usage

Select a date using the calendar interface or keyboard navigation.

Select a date

import { useState } from 'react';
import { AccessibleDatePicker } from '@a13y/react';

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

  return (
    <AccessibleDatePicker
      label="Select a date"
      value={date}
      onChange={setDate}
    />
  );
}

With Date Constraints

Restrict selectable dates with minDate and maxDate props.

Select a future date

const today = new Date();
const nextMonth = new Date();
nextMonth.setMonth(nextMonth.getMonth() + 1);

<AccessibleDatePicker
  label="Select a date"
  value={date}
  onChange={setDate}
  minDate={today}
  maxDate={nextMonth}
/>

Props

Name	Type	Default	Description
`label*`	`string`	-	Label for the date picker
`value*`	`Date \| null`	-	Selected date value
`onChange*`	`(date: Date \| null) => void`	-	Callback fired when date selection changes
`minDate`	`Date`	-	Minimum selectable date
`maxDate`	`Date`	-	Maximum selectable date
`disabledDates`	`Date[]`	-	Array of dates that cannot be selected
`locale`	`string`	`'en-US'`	Locale for date formatting
`disabled`	`boolean`	`false`	Disable the date picker
`className`	`string`	-	Optional CSS class

Keyboard Navigation

Arrow KeysNavigate between days

Space/EnterSelect focused date

HomeFirst day of week

EndLast day of week

Page UpPrevious month

Page DownNext month

Accessibility Features

✓Implements ARIA grid pattern with role="grid"
✓Full keyboard navigation with arrow keys, Home, End, Page Up/Down
✓Current date and selected date clearly announced via aria-label
✓Disabled dates marked with aria-disabled
✓Month/year selection controls properly labeled