daterangepicker
daterangepicker copied to clipboard
dangrossman
Added keyboard navigation
Keyboard interaction
General
- Tab / Shift+Tab Navigates through the "focusable" items within the calendar pane. These items include date range labels, apply and cancel buttons, date/time inputs, and calendar grids - although only the currently selected start and end dates will accept focus (once a specific date has focus, use the keys specified in the next section to change which dates can accept/have focus).
When focused on a specific date
- Left Move focus to the previous day. Will move to the last day of the previous month, if the current day is the first day of a month.
- Right Move focus to the next day. Will move to the first day of the following month, if the current day is the last day of a month.
- Up Move focus to the same day of the previous week. Will wrap to the appropriate day in the previous month.
- Down Move focus to the same day of the following week. Will wrap to the appropriate day in the following month.
- PgUp Move focus to the same date of the previous month. If that date does not exist, focus is placed on the last day of the month.
- PgDn Move focus to the same date of the following month. If that date does not exist, focus is placed on the last day of the month.
- Shift+PgUp Move focus to the same date of the previous year. If that date does not exist (e.g leap year), focus is placed on the last day of the month.
- Shift+PgDn Move focus to the same date of the following year. If that date does not exist (e.g leap year), focus is placed on the last day of the month.
- Home Move to the first day of the month.
- End Move to the last day of the month.
- Enter / Space Simulates a click on the highlighted date (in dual calendar mode, is aware of whether this should be the start or the end date).
When focused on a navigational arrow
- Enter / Space Simulates a click on the highlighted navigational arrow.
When focused on a date range label
- Up Move focus to the previous date range label (does not apply selection without user pressing enter/space). Will wrap back around to the bottom of the list if already at the top.
- Down Move focus to the next date range label (does not apply selection without user pressing enter/space). Will wrap back around to the top of the list if already at the bottom.
- Enter / Space Simulates a click on the highlighted date range (making the selection, and applying the range as appropriate).
When focused on an action button
- Enter / Space Simulates a button click on the highlighted action button.
@dangrossman , @reinrl What will it take to review and merge this? Pretty important feature to have.
@absessive @dangrossman @reinrl I'm not sure if it's 100% related, but i spotted on keyboard issue, Here are steps:
- Focus somewhere else before date input field.
- Tab to reach the date picker field.
- Hit the Return key to close the calendar pop-up.
- Attempt to type in a date. It will default to 01/01/2018 12:00AM.
Use cases: Tab => Return => then typed
- 01 gives 01/01/2018 12:00AM.
- 02 gives 02/01/2018 12:00AM.
- 03 gives 03/01/2018 12:00AM.
- 10 gives 10/01/2018 12:00AM.
- 20 gives 2/01 12:00 AM - 2/01 12:00 AM
- 23 gives 02/01/2018 - 02/01/2018
and here is gif:
If this is related then take to consideration. If not, let me know, I willr ecreate new issue, or let me know existed issue on such topic.
I made a fork of v3.0.3 and pulled these code changes in. With very minor changes, it seems to work. Nice work, and thank you!
Daterangepicker with keyboard support
Disappointed this effort wasn't considered for merging. Accessibility would really be improved if keyboard navigation was supported.
+1 Would greatly appreciate any effort towards improved Accessibility features. Is there anyway I could help out with this?
