Date picker calendar grids: Previous and next month and year functions do not behave as documented

[smellai]

I found an edge case with 'PageUp' and 'PageDown' navigation.

1. current day selected/focused: March 31
2. press PageUp
3. March 2 is selected because February 31 doesn't exist.

Proposed solution:

var newDate = new Date(
  date.getFullYear(),
  date.getMonth() - 1,
  Math.min(date.getDate(), lastDayOfNextMonth.getDate())
);

And similar for shift+PageUp:

var newDate = new Date(
  date.getFullYear() + 1,
  date.getMonth(),
  Math.min(date.getDate(), lastDayOfNextMonth.getDate())
);

That last one covers if current year has Feb 29 and next year obviously not.

[mcking65]

Hi @smellai,

Thank you for the feedback. There are several possible solutions for what to do when the same date does not exist in the previous or next period of time. I believe the task force considered the approach you suggest. The approach that was chosen is documented in the keyboard table as follows:

Page Up:

• Changes the grid of dates to the previous month.
• Sets focus on the same day of the same week. If that day does not exist, then moves focus to the same day of the previous or next week.

Page Down:

• Changes the grid of dates to the next month.
• Sets focus on the same day of the same week. If that day does not exist, then moves focus to the same day of the previous or next week.

I recall the task force having discussion of the above design decision, but I can't find documentation of the discussion in any of the related issues. It may be in meeting minutes; that would be a more time consuming search. It may be more expedient to re-open the discussion.

If you think the task force should re-open this discussion, would you please:

1. Provide your reasons for why the current behavior should be replaced with an alternative behavior,
2. And, Define your proposed alternative behavior in prose the way it would be described in the keyboard table.

[smellai]

I could be ok with the approach described in the documentation, but doesn't look like the demo is working in the way described. This is what I see:

• March 31 selected (Friday)
• Page down
• May 1 is selected (Monday)

and

• March 31 selected (Friday)
• Page up
• March 3 selected (Friday)
  this could be correct according to specs (same day of next week selected), but we stay in the same month, looks a bit weird.

and

• February 29, 2024 selected (Thursday)
• Shift + Page up
• March 1, 2024 selected (Wednesday)

[mani-rsg]

Hi @smellai and @mcking65 ,
I am facing the same issue as well. Reg the solution, I suggest using the 1st day of the month, if the focussed date of the previous month is not present in the navigated month. So by doing this it won't look weird for the below case as well.

• March 31 selected (Friday)
• Page up
• March 3 selected (Friday)
  this could be correct according to specs (same day of next week selected), but we stay in the same month, looks a bit weird.

[mcking65]

We have decided to change the behavior so that previous/next month/year functions put focus on the last day of the month in the newly displayed month if the same day number does not exist. In this way, previous/next month will always move to a new month. Previous/next year are only affected if the focus is on Feb 29 when the function is activated.

This issue impacts both:

• Date Picker Combobox Example, which will be fixed by Combobox Date Picker Example: Change previous and next month and year behavior for dates near end of month by jongund · Pull Request #2618.
• Date Picker Dialog Example, which will be fixed by Datepicker Modal Dialog: Updated code and fixed next/prev month bug by jongund · Pull Request #2643

The changes in PR #2618 are on track to make it into production on April 11. It is possible that #2643 changes could make it at the same time, but if not, they will be on track to land before the end of April.

[mcking65]

#2643 is now merged and will be in the next site publication, so closing this issue.

Thank you @smellai for raising this issue. It drove several improvements to the code and documentation.

Thank you @jongund for all the work on the PRs!