fix(datetimepicker): resolve issue with active cell highlighting #381
Conversation
| } | ||
| </tr> | ||
| } | ||
| } | ||
|
|
| (@slideCalendar.done)="_calendarStateDone()" | ||
| [@slideCalendar]="_calendarState" | ||
| [rows]="_weeks" | ||
| [todayValue]="_todayDate!" | ||
| [activeCell]="_adapter.getDate(activeDate) - 1" | ||
| [activeCell]="_getActiveCell()" |
There was a problem hiding this comment.
The active cell logic has no issue, we just should improve the a11y.
https://github.com/angular/components/blob/main/src/material/datepicker/month-view.html#L25
There was a problem hiding this comment.
Yes, I figured it out! Material has implemented a11y very effectively.
- Update `_dateButtonText` to show the selected date when a date is chosen - Fall back to displaying today's date if no date selected or when navigating between months/years - Ensure consistent and intuitive date display behavior
…extensions into fix-active-cell-highlight
|
I’m working to improve accessibility by implementing the same approach as the Material Date Picker and ensuring it functions in a similar way. |
- Implement behavior similar to Angular Material datepicker for keyboard navigation - Disable arrow key date selection after user clicks next/previous month - Re-enable arrow key navigation when user selects a specific date - Add `_nextOrPreviousManuallyClicked` variable in `calendar.ts` to track navigation state - Pass navigation state to month-view component via @input() decorator
- Implement behavior similar to Angular Material datepicker for keyboard navigation - Disable arrow key date selection after user clicks next/previous month - Re-enable arrow key navigation when user selects a specific date - Add `_nextOrPreviousManuallyClicked` variable in `calendar.ts` to track navigation state - Pass navigation state to month-view component via @input() decorator
- Implement behavior similar to Angular Material datepicker for keyboard navigation - Disable arrow key date selection after user clicks next/previous month - Re-enable arrow key navigation when user selects a specific date - Add `_nextOrPreviousManuallyClicked` variable in `calendar.ts` to track navigation state - Pass navigation state to month-view component via @input() decorator
|
Hello @nzbin , I've successfully implemented a behavior similar to the Angular Material datepicker navigation. Currently, this is implemented for the month view (type='date'). Could you please review the implementation and provide your feedback? If it meets the requirements, I'll extend the same approach to the year and multi-year views. Looking forward to your thoughts! |
Do you check the Angular Material source codes? You need the CDK a11y module to implement and there're lots of work. |
Yes, sometimes. I realized that using the a11y module would require significant time and effort, so I implemented a solution that achieves the same behavior in a simpler way. |
@fortrackfunction in calendar-body.html._getActiveCellmethod in month-view.ts to prioritize highlighting of the selected date or today's date when no date is selected in the calendar view.