@primereact/mcp 11.0.0-rc.2

package/data/llms/primitive/components/datepicker.md

@@ -0,0 +1,760 @@
+# DatePicker
+
+An unstyled date picker component with calendar navigation, view switching, and time selection.
+
+<DocPrimitiveIntro description="Build fully custom date pickers with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { ChevronLeft } from '@primeicons/react/chevron-left';
+import { ChevronRight } from '@primeicons/react/chevron-right';
+import { DatePicker, type DatePickerRootProps, type DatePickerRootValueChangeEvent } from 'primereact/datepicker';
+import * as React from 'react';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);
+
+    return (
+        <div className={styles.wrapper}>
+            <DatePicker.Root className={styles.root} value={date} onValueChange={(event: DatePickerRootValueChangeEvent) => setDate(event.value)}>
+                <DatePicker.Input placeholder="mm/dd/yy" className={styles.input} />
+                <DatePicker.Portal>
+                    <DatePicker.Positioner>
+                        <DatePicker.Popup className={styles.popup}>
+                            <DatePicker.Calendar>
+                                <DatePicker.Header className={styles.header}>
+                                    <DatePicker.Prev className={styles.navButton}>
+                                        <ChevronLeft className={styles.navIcon} />
+                                    </DatePicker.Prev>
+                                    <DatePicker.Title className={styles.title}>
+                                        <DatePicker.SelectMonth className={styles.viewButton} />
+                                        <DatePicker.SelectYear className={styles.viewButton} />
+                                        <DatePicker.Decade />
+                                    </DatePicker.Title>
+                                    <DatePicker.Next className={styles.navButton}>
+                                        <ChevronRight className={styles.navIcon} />
+                                    </DatePicker.Next>
+                                </DatePicker.Header>
+                                <DatePicker.Table className={styles.table}>
+                                    <DatePicker.TableHead />
+                                    <DatePicker.TableBody />
+                                    <DatePicker.TableBody view="month" />
+                                    <DatePicker.TableBody view="year" />
+                                </DatePicker.Table>
+                            </DatePicker.Calendar>
+                        </DatePicker.Popup>
+                    </DatePicker.Positioner>
+                </DatePicker.Portal>
+            </DatePicker.Root>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="DatePicker" />
+
+## Features
+
+- Compound component API with sub-components: `Root`, `Input`, `Trigger`, `Value`, `Clear`, `ClearTrigger`, `Portal`, `Positioner`, `Arrow`, `Popup`, `Body`, `Panel`, `Calendar`, `Header`, `Prev`, `Next`, `Title`, `SelectMonth`, `SelectYear`, `Decade`, `Table`, `TableHead`, `TableHeadRow`, `TableHeadCell`, `TableHeadWeekCell`, `TableHeadWeekLabel`, `TableHeadWeekHeaderLabel`, `TableBody`, `TableBodyRow`, `TableBodyCell`, `TableBodyWeekCell`, `TableBodyWeekLabel`, `Day`, `Month`, `Year`, `Time`, `Picker`, `Hour`, `Minute`, `Second`, `AmPm`, `Increment`, `Decrement`, `Separator`, `Buttonbar`, `Footer`, `Today`
+- Three calendar views, date, month, and year, with animated navigation between months, years, and decades
+- Single, multiple, and range date selection with keyboard focus cycling
+- Integrated time picker with 12/24 hour format, minute, and second controls
+
+## Usage
+
+```tsx
+import { DatePicker } from 'primereact/datepicker';
+```
+
+```tsx
+<DatePicker.Root>
+    <DatePicker.Input />
+    <DatePicker.Portal>
+        <DatePicker.Positioner>
+            <DatePicker.Popup>
+                <DatePicker.Arrow />
+                <DatePicker.Calendar>
+                    <DatePicker.Header>
+                        <DatePicker.Prev></DatePicker.Prev>
+                        <DatePicker.Title>
+                            <DatePicker.SelectMonth />
+                            <DatePicker.SelectYear />
+                            <DatePicker.Decade />
+                        </DatePicker.Title>
+                        <DatePicker.Next></DatePicker.Next>
+                    </DatePicker.Header>
+                    <DatePicker.Table>
+                        <DatePicker.TableHead />
+                        <DatePicker.TableBody />
+                        <DatePicker.TableBody view="month" />
+                        <DatePicker.TableBody view="year" />
+                    </DatePicker.Table>
+                    <DatePicker.Buttonbar>
+                        <DatePicker.Today></DatePicker.Today>
+                        <DatePicker.ClearTrigger></DatePicker.ClearTrigger>
+                    </DatePicker.Buttonbar>
+                </DatePicker.Calendar>
+                <DatePicker.Time>
+                    <DatePicker.Picker type="hour">
+                        <DatePicker.Increment></DatePicker.Increment>
+                        <DatePicker.Hour />
+                        <DatePicker.Decrement></DatePicker.Decrement>
+                    </DatePicker.Picker>
+                    <DatePicker.Separator />
+                    <DatePicker.Picker type="minute">
+                        <DatePicker.Increment></DatePicker.Increment>
+                        <DatePicker.Minute />
+                        <DatePicker.Decrement></DatePicker.Decrement>
+                    </DatePicker.Picker>
+                </DatePicker.Time>
+            </DatePicker.Popup>
+        </DatePicker.Positioner>
+    </DatePicker.Portal>
+</DatePicker.Root>
+```
+
+## Behavior
+
+### Motion Animation
+
+```tsx
+<DatePicker.Popup motionProps={{ name: 'p-datepicker' }}>...</DatePicker.Popup>
+```
+
+See [Motion](/docs/primitive/components/motion) for animation phases, CSS variables, and hide strategies.
+
+### Polymorphic Rendering
+
+Use `as` on any sub-component to change the rendered HTML element.
+
+```tsx
+<DatePicker.Root as="section">
+    <DatePicker.Input as="div" />
+    <DatePicker.Prev as="a">...</DatePicker.Prev>
+</DatePicker.Root>
+```
+
+### Render Function Children
+
+`DatePicker.TableBody`, `DatePicker.TableHead`, and other container components accept a render function as children, providing access to the component instance for custom cell rendering.
+
+```tsx
+<DatePicker.TableBody>
+    {(instance) =>
+        instance.datepicker?.months[0]?.dates.map((week, weekIndex) => (
+            <DatePicker.TableBodyRow key={weekIndex}>
+                {week.map((date, dateIndex) => (
+                    <DatePicker.TableBodyCell key={dateIndex} date={date}>
+                        <DatePicker.Day>{date.day}</DatePicker.Day>
+                    </DatePicker.TableBodyCell>
+                ))}
+            </DatePicker.TableBodyRow>
+        ))
+    }
+</DatePicker.TableBody>
+```
+
+## Pass Through
+
+<DocPTViewer name="datepicker-pt" components={['DatePickerRoot']} />
+
+## API
+
+### DatePickerRoot
+
+<DocTable name="DatePickerRoot" category="api" />
+
+| Attribute       | Value                  |
+| --------------- | ---------------------- |
+| `data-scope`    | `"datepicker"`         |
+| `data-part`     | `"root"`               |
+| `data-disabled` | Present when disabled  |
+| `data-invalid`  | Present when invalid   |
+| `data-readonly` | Present when read-only |
+
+<DocTable name="DatePickerRoot" category="pt" />
+
+### DatePickerInput
+
+<DocTable name="DatePickerInput" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"input"`      |
+
+<DocTable name="DatePickerInput" category="pt" />
+
+### DatePickerTrigger
+
+<DocTable name="DatePickerTrigger" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"trigger"`    |
+
+### DatePickerValue
+
+<DocTable name="DatePickerValue" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"value"`      |
+
+### DatePickerClear
+
+<DocTable name="DatePickerClear" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"clear"`      |
+
+<DocTable name="DatePickerClear" category="pt" />
+
+### DatePickerClearTrigger
+
+<DocTable name="DatePickerClearTrigger" category="api" />
+
+| Attribute    | Value             |
+| ------------ | ----------------- |
+| `data-scope` | `"datepicker"`    |
+| `data-part`  | `"clear-trigger"` |
+
+<DocTable name="DatePickerClearTrigger" category="pt" />
+
+### DatePickerPortal
+
+<DocTable name="DatePickerPortal" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"portal"`     |
+
+<DocTable name="DatePickerPortal" category="pt" />
+
+### DatePickerPositioner
+
+<DocTable name="DatePickerPositioner" category="api" />
+
+| Attribute    | Value                                                     |
+| ------------ | --------------------------------------------------------- |
+| `data-scope` | `"datepicker"`                                            |
+| `data-part`  | `"positioner"`                                            |
+| `data-side`  | `"top"` \| `"bottom"` \| `"left"` \| `"right"`, placement |
+| `data-align` | `"start"` \| `"center"` \| `"end"`, alignment             |
+
+**CSS Custom Properties**
+
+The positioner element exposes CSS custom properties for layout and transform control.
+
+| CSS Variable                | Description                              |
+| --------------------------- | ---------------------------------------- |
+| `--available-height`        | Available vertical space in pixels       |
+| `--available-width`         | Available horizontal space in pixels     |
+| `--transform-origin`        | Computed transform origin for animations |
+| `--positioner-anchor-width` | Width of the anchor/trigger element      |
+
+### DatePickerPopup
+
+<DocTable name="DatePickerPopup" category="api" />
+
+| Attribute    | Value                      |
+| ------------ | -------------------------- |
+| `data-scope` | `"datepicker"`             |
+| `data-part`  | `"popup"`                  |
+| `data-open`  | Present when popup is open |
+
+### DatePickerArrow
+
+<DocTable name="DatePickerArrow" category="api" />
+
+| Attribute    | Value                                                     |
+| ------------ | --------------------------------------------------------- |
+| `data-scope` | `"datepicker"`                                            |
+| `data-part`  | `"arrow"`                                                 |
+| `data-side`  | `"top"` \| `"bottom"` \| `"left"` \| `"right"`, placement |
+| `data-align` | `"start"` \| `"center"` \| `"end"`, alignment             |
+
+**CSS Custom Properties**
+
+The arrow element exposes CSS custom properties for dynamic positioning:
+
+| CSS Variable          | Description                    |
+| --------------------- | ------------------------------ |
+| `--placer-arrow-x`    | Horizontal offset of arrow     |
+| `--placer-arrow-y`    | Vertical offset of arrow       |
+| `--placer-arrow-left` | Left position of arrow element |
+| `--placer-arrow-top`  | Top position of arrow element  |
+
+### DatePickerBody
+
+<DocTable name="DatePickerBody" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"body"`       |
+
+<DocTable name="DatePickerBody" category="pt" />
+
+### DatePickerPanel
+
+<DocTable name="DatePickerPanel" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"panel"`      |
+
+<DocTable name="DatePickerPanel" category="pt" />
+
+### DatePickerCalendar
+
+<DocTable name="DatePickerCalendar" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"calendar"`   |
+
+<DocTable name="DatePickerCalendar" category="pt" />
+
+### DatePickerHeader
+
+<DocTable name="DatePickerHeader" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"header"`     |
+
+<DocTable name="DatePickerHeader" category="pt" />
+
+### DatePickerPrev
+
+<DocTable name="DatePickerPrev" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"prev"`       |
+
+<DocTable name="DatePickerPrev" category="pt" />
+
+### DatePickerNext
+
+<DocTable name="DatePickerNext" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"next"`       |
+
+<DocTable name="DatePickerNext" category="pt" />
+
+### DatePickerTitle
+
+<DocTable name="DatePickerTitle" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"title"`      |
+
+<DocTable name="DatePickerTitle" category="pt" />
+
+### DatePickerSelectMonth
+
+<DocTable name="DatePickerSelectMonth" category="api" />
+
+| Attribute    | Value            |
+| ------------ | ---------------- |
+| `data-scope` | `"datepicker"`   |
+| `data-part`  | `"select-month"` |
+
+<DocTable name="DatePickerSelectMonth" category="pt" />
+
+### DatePickerSelectYear
+
+<DocTable name="DatePickerSelectYear" category="api" />
+
+| Attribute    | Value           |
+| ------------ | --------------- |
+| `data-scope` | `"datepicker"`  |
+| `data-part`  | `"select-year"` |
+
+<DocTable name="DatePickerSelectYear" category="pt" />
+
+### DatePickerDecade
+
+<DocTable name="DatePickerDecade" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"decade"`     |
+
+<DocTable name="DatePickerDecade" category="pt" />
+
+### DatePickerTable
+
+<DocTable name="DatePickerTable" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"table"`      |
+
+<DocTable name="DatePickerTable" category="pt" />
+
+### DatePickerTableHead
+
+<DocTable name="DatePickerTableHead" category="api" />
+
+| Attribute    | Value           |
+| ------------ | --------------- |
+| `data-scope` | `"datepicker"`  |
+| `data-part`  | `"tableHeader"` |
+
+<DocTable name="DatePickerTableHead" category="pt" />
+
+### DatePickerTableHeadRow
+
+<DocTable name="DatePickerTableHeadRow" category="api" />
+
+| Attribute    | Value              |
+| ------------ | ------------------ |
+| `data-scope` | `"datepicker"`     |
+| `data-part`  | `"tableHeaderRow"` |
+
+<DocTable name="DatePickerTableHeadRow" category="pt" />
+
+### DatePickerTableHeadCell
+
+<DocTable name="DatePickerTableHeadCell" category="api" />
+
+| Attribute    | Value           |
+| ------------ | --------------- |
+| `data-scope` | `"datepicker"`  |
+| `data-part`  | `"weekDayCell"` |
+
+<DocTable name="DatePickerTableHeadCell" category="pt" />
+
+### DatePickerTableHeadWeekCell
+
+<DocTable name="DatePickerTableHeadWeekCell" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"weekHeader"` |
+
+<DocTable name="DatePickerTableHeadWeekCell" category="pt" />
+
+### DatePickerTableHeadWeekLabel
+
+<DocTable name="DatePickerTableHeadWeekLabel" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"weekDay"`    |
+
+### DatePickerTableHeadWeekHeaderLabel
+
+<DocTable name="DatePickerTableHeadWeekHeaderLabel" category="api" />
+
+| Attribute    | Value               |
+| ------------ | ------------------- |
+| `data-scope` | `"datepicker"`      |
+| `data-part`  | `"weekHeaderLabel"` |
+
+### DatePickerTableBody
+
+<DocTable name="DatePickerTableBody" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"tableBody"`  |
+
+<DocTable name="DatePickerTableBody" category="pt" />
+
+### DatePickerTableBodyRow
+
+<DocTable name="DatePickerTableBodyRow" category="api" />
+
+| Attribute    | Value            |
+| ------------ | ---------------- |
+| `data-scope` | `"datepicker"`   |
+| `data-part`  | `"tableBodyRow"` |
+
+<DocTable name="DatePickerTableBodyRow" category="pt" />
+
+### DatePickerTableBodyCell
+
+<DocTable name="DatePickerTableBodyCell" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"cell"`       |
+
+<DocTable name="DatePickerTableBodyCell" category="pt" />
+
+### DatePickerTableBodyWeekCell
+
+<DocTable name="DatePickerTableBodyWeekCell" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"weekNumber"` |
+
+<DocTable name="DatePickerTableBodyWeekCell" category="pt" />
+
+### DatePickerTableBodyWeekLabel
+
+<DocTable name="DatePickerTableBodyWeekLabel" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"weekLabel"`  |
+
+### DatePickerDay
+
+<DocTable name="DatePickerDay" category="api" />
+
+| Attribute          | Value                        |
+| ------------------ | ---------------------------- |
+| `data-scope`       | `"datepicker"`               |
+| `data-part`        | `"day"`                      |
+| `data-selected`    | `"true"` when selected       |
+| `data-disabled`    | `"true"` when disabled       |
+| `data-today`       | `"true"` on today's date     |
+| `data-other-month` | `"true"` for adjacent months |
+
+### DatePickerMonth
+
+<DocTable name="DatePickerMonth" category="api" />
+
+| Attribute       | Value                  |
+| --------------- | ---------------------- |
+| `data-scope`    | `"datepicker"`         |
+| `data-part`     | `"month"`              |
+| `data-selected` | `"true"` when selected |
+| `data-disabled` | `"true"` when disabled |
+
+### DatePickerYear
+
+<DocTable name="DatePickerYear" category="api" />
+
+| Attribute       | Value                  |
+| --------------- | ---------------------- |
+| `data-scope`    | `"datepicker"`         |
+| `data-part`     | `"year"`               |
+| `data-selected` | `"true"` when selected |
+| `data-disabled` | `"true"` when disabled |
+
+### DatePickerTime
+
+<DocTable name="DatePickerTime" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"timePicker"` |
+
+<DocTable name="DatePickerTime" category="pt" />
+
+### DatePickerPicker
+
+<DocTable name="DatePickerPicker" category="api" />
+
+| Attribute    | Value                                                                    |
+| ------------ | ------------------------------------------------------------------------ |
+| `data-scope` | `"datepicker"`                                                           |
+| `data-part`  | `"hourPicker"` \| `"minutePicker"` \| `"secondPicker"` \| `"ampmPicker"` |
+
+<DocTable name="DatePickerPicker" category="pt" />
+
+### DatePickerHour
+
+<DocTable name="DatePickerHour" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"hour"`       |
+
+<DocTable name="DatePickerHour" category="pt" />
+
+### DatePickerMinute
+
+<DocTable name="DatePickerMinute" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"minute"`     |
+
+<DocTable name="DatePickerMinute" category="pt" />
+
+### DatePickerSecond
+
+<DocTable name="DatePickerSecond" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"second"`     |
+
+<DocTable name="DatePickerSecond" category="pt" />
+
+### DatePickerAmPm
+
+<DocTable name="DatePickerAmPm" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"ampm"`       |
+
+<DocTable name="DatePickerAmPm" category="pt" />
+
+### DatePickerIncrement
+
+<DocTable name="DatePickerIncrement" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"increment"`  |
+
+<DocTable name="DatePickerIncrement" category="pt" />
+
+### DatePickerDecrement
+
+<DocTable name="DatePickerDecrement" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"decrement"`  |
+
+<DocTable name="DatePickerDecrement" category="pt" />
+
+### DatePickerSeparator
+
+<DocTable name="DatePickerSeparator" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"separator"`  |
+
+### DatePickerButtonbar
+
+<DocTable name="DatePickerButtonbar" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"buttonbar"`  |
+
+<DocTable name="DatePickerButtonbar" category="pt" />
+
+### DatePickerFooter
+
+<DocTable name="DatePickerFooter" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"footer"`     |
+
+<DocTable name="DatePickerFooter" category="pt" />
+
+### DatePickerToday
+
+<DocTable name="DatePickerToday" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"datepicker"` |
+| `data-part`  | `"today"`      |
+
+<DocTable name="DatePickerToday" category="pt" />
+
+### DatePickerDropdown
+
+<DocTable name="DatePickerDropdown" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+Value to describe the component can either be provided via `label` tag combined with `inputId` prop or using `aria-labelledby`, `aria-label` props. The input element has `combobox` role in addition to `aria-autocomplete` as "none", `aria-haspopup` as "dialog" and `aria-expanded` attributes. The relation between the input and the popup is created with `aria-controls` attribute that refers to the id of the popup.
+
+The optional datepicker button requires includes `aria-haspopup`, `aria-expanded` for states along with `aria-controls` to define the relation between the popup and the button.
+
+Popup has a `dialog` role along with `aria-modal` and `aria-label`. The navigation buttons at the header have an `aria-label` retrieved from the locale aria API. Similarly month picker button uses the `chooseMonth` and year picker button uses the `chooseYear` keys.
+
+Main date table uses `grid` role that contains th elements with `col` as the scope along with `abbr` tag resolving to the full name of the month. Each date cell has an `aria-label` referring to the full date value. Buttons at the footer utilize their readable labels as `aria-label` as well. Selected date also receives the `aria-selected` attribute.
+
+Timepicker spinner buttons get their labels for `aria-label` from the aria locale API using the `prevHour`, `nextHour`, `prevMinute`, `nextMinute`, `prevSecond`, `nextSecond`, `am` and `pm` keys.
+
+DatePicker also includes a hidden section that is only available to screen readers with `aria-live` as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.
+
+### Choose Date Button Keyboard Support
+
+| Key     | Function                                                                             |
+| ------- | ------------------------------------------------------------------------------------ |
+| `space` | Opens popup and moves focus to the selected date, if there is none focuses on today. |
+| `enter` | Opens popup and moves focus to the selected date, if there is none focuses on today. |
+
+### Popup Keyboard Support
+
+| Key             | Function                                                    |
+| --------------- | ----------------------------------------------------------- |
+| `escape`        | Closes the popup and moves focus to the input element.      |
+| `tab`           | Moves focus to the next focusable element within the popup. |
+| `shift` + `tab` | Moves focus to the next focusable element within the popup. |
+
+### Header Buttons Keyboard Support
+
+| Key     | Function                    |
+| ------- | --------------------------- |
+| `enter` | Triggers the button action. |
+| `space` | Triggers the button action. |
+
+### Date Grid Keyboard Support
+
+| Key                   | Function                                                                                                                                |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `enter`               | Selects the date, closes the popup and moves focus to the input element.                                                                |
+| `space`               | Closes the popup and moves focus to the input element.                                                                                  |
+| `up arrow`            | Moves focus to the same day of the previous week.                                                                                       |
+| `alt` + `up arrow`    | Closes the popup and moves focus to the input element.                                                                                  |
+| `down arrow`          | Moves focus to the same day of the next week.                                                                                           |
+| `right arrow`         | Moves focus to the next day.                                                                                                            |
+| `left arrow`          | Moves focus to the previous day.                                                                                                        |
+| `home`                | Moves focus to the first day of the current week.                                                                                       |
+| `end`                 | Moves focus to the last day of the current week.                                                                                        |
+| `page up`             | Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker. |
+| `shift` + `page up`   | Changes the date to previous year in date picker mode. Has no effect in month or year picker.                                           |
+| `page down`           | Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.             |
+| `shift` + `page down` | Changes the date to next year in date picker mode. Has no effect in month or year picker.                                               |
+
+### Footer Buttons Keyboard Support
+
+| Key     | Function                    |
+| ------- | --------------------------- |
+| `enter` | Triggers the button action. |
+| `space` | Triggers the button action. |