Skip to content
v2.5.0
English
Русский
Documentation

DayPicker

DayPicker is the lower-level day-grid subsystem used by the calendar stack.

Labeling

  • The surrounding calendar surface should explain what month and year the user is currently viewing.

Keyboard Behavior

AnnouncementFocus the demo and press a key from the table.
KeyAction
←→Moves the focus to the previous or next day, wrapping to the neighbouring week and skipping disabled days. In RTL the arrows are mirrored: ← moves to the next day.
↑↓Moves the focus to the same weekday of the previous or next week, stopping at the edge of the month.
HomeEndMoves the focus to the first or last day of the week.
Ctrl + HomeCtrl + EndMoves the focus to the first or last day of the month.
Page UpPage DownMoves the focus to the same weekday in the first or last week of the month. The month itself does not change: paging months belongs to Calendar.
EnterSpaceSelects the focused day.
Every row is checked in a real browser: Playwright presses the key in Chromium and checks where the focus and the active item land.
  • Keyboard navigation is inherited from DataGridPicker and the grid item semantics.

Focus Behavior

  • Without defaultActive, the tab stop is today when it is in the visible month, otherwise the first selected day in it, otherwise its first day; when you change month later, pass active / onChangeActive to keep the tab stop in view
  • Focus and active cell behavior should remain visible across selected, excluded, and disabled dates.

Screen Reader Semantics

  • Grid roles and state semantics come from the underlying picker/grid primitives.
  • Weekday labels and period labels should stay synchronized with the rendered month.

Form Semantics

  • DayPicker is a picker subsystem, not native form input by itself.

Accessibility Risks

  • custom day rendering that hides focus or selection state
  • scrollable month paging with unclear period announcements