DatePicker / Keyboard Navigation

Blazor DatePicker Example - Keyboard Navigation

Loading Syncfusion Blazor Server Demos…

DatePicker functionalities can be accessed interactively through keyboard shortcuts. Various key combinations enable efficient interaction with the DatePicker component.

Focus Navigation:

  • Alt + J — Focuses on the first component of the sample

Input Navigation:

  • Alt + Down Arrow — Opens the popup
  • Alt + Up Arrow — Closes the popup
  • Esc — Closes the popup

Date Selection:

  • Enter — Selects the currently focused date

Popup Navigation:

  • Up Arrow — Focuses the same day on the previous week
  • Down Arrow — Focuses the same day on the next week
  • Left Arrow — Focuses the previous day
  • Right Arrow — Focuses the next day
  • Home — Focuses the first day of the month
  • End — Focuses the last day of the month
  • Page Up — Focuses the same date on the previous month
  • Page Down — Focuses the same date on the next month
  • Shift + Page Up — Focuses the same date on the previous year
  • Shift + Page Down — Focuses the same date on the next year
  • Ctrl + Home — Focuses the first date of the current year
  • Ctrl + End — Focuses the last date of the current year

Popup View Navigation:

  • Ctrl + Up Arrow — Moves to inner view level (month to year, year to decade)
  • Ctrl + Down Arrow — Moves to outer view level (decade to year, year to month)
Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE