Date Picker monthly navigation skips a month [BUG]

[dogle-scottlogic]

Description of the issue

We have a requirement to set the minDate for the date picker to the last day of the previous month so that we can always navigate back one month. When we do this the navigation for months skips out the current month (See steps below).

Steps to reproduce the issue

For all steps the following variables remain constant:

• this.maxDate is 08/Dec/2023
• this.minDate is 31/Oct/2023
• this.disabledDates is ['10/31/2023', '11/1/2023', '11/2/2023', '11/3/2023', '11/4/2023', '11/5/2023', '11/6/2023', '11/7/2023', '11/8/2023', '11/11/2023', '11/12/2023', '11/18/2023', '11/19/2023', '11/25/2023', '11/26/2023', '12/2/2023', '12/3/2023']

Steps:

• Initiate Date Picker with Min date 31/Oct/2023 and no Initial date set and Max date 08/Dec/2023. Todays Date in this example is 07/Nov/2023.
• Open Date Picker
  • this.currentDate is 07/Nov/2023
• Navigate to next month with UI button
  • this.currentDate is 07/Dec/2023
• Navigate to previous month with UI button
  • this.currentDate is 31/Oct/2023
• Navigate to next month with UI button
  • this.currentDate is 01/Dec/2023

Expected behaviour

Rather than Nov -> Dec <- Oct -> Dec the navigation should be Nov -> Dec <- Nov -> Dec <- Nov <- Oct -> Nov

From a little digging it seems that what's happening is:

• Open Date Picker
  • this.currentDate is 07/Nov/2023
• Navigate to next month with UI button
  • this.currentDate is 07/Dec/2023
• Navigate to previous month with UI button
  • focusPreviousMonth calls date.setMonth(date.getMonth() - 1);
  • this results in date being 01/Nov/2023
  • 01/Nov/2023 is a disabled date (see above consts) so the logic calls focusPreviousDay
  • This steps back to 31/Oct/2023 - still a disabled Date
  • This steps back again to 30/Oct/2023 - This is not disabled so we navigate here.
  • 30/Oct/2023 is less than the minDate so currentDate is set to 31/Oct/2023

Likewise when we step forward again after this point:

• date.setMonth(date.getMonth() + 1); evaluates to 01/Dec/2023 when date is 31/Oct/2023

Update: This bug is also partially reproducible in the example Date Picker on the design system website by navigating to 31/01/2024 and then clicking forward a month. Expected behaviour is to be taken to Feb, actual behaviour is you are skipped to March

Screenshots

Environment

• Operating system:
• Browser: Chrome
• Browser version: Version 119.0.6045.105 (Official Build) (64-bit)
• Design System version: 0.2.0

[jsutcliffe]

Hello,

This is currently being worked on. It has exposed some flakiness in how we handle disabled dates, and we'll be refactoring how they work. We expect this to be released by 22 November 2023.

Disabled dates will be focusable but not selectable

This is an accessibility improvement. Disabled dates will not be selectable, but being able to move through disabled dates will be less jarring for a non-sighted user who might in the current date picker be jumped over a set of disabled dates with no explanation of why. Disabled dates will use aria-disabled="true" to flag this status for assistive tech.

Date picker can be navigated through beyond allowed date ranges

This will address your use case where you want to be able to show a user an entire unavailable month ("...so that we can always navigate back one month")

Date picker next/previous month logic improved

A selection of 31 Jan will no longer skip over the entirety of February

[jsutcliffe]

This alteration to how the date picker works has been released in v1.2.0

[jsutcliffe]

Issue resolved.