Hi everyone,
We’re encountering a recurring visual bug with the DatePicker component from @shopify/ui-extensions-react/checkout.
Issue:
Dates that are explicitly included in the disabled prop array are sometimes visually rendering in the calendar as if they were enabled. They do not consistently have the distinct visual styling typically associated with disabled dates.
Details:
-
We are passing an array of date strings in
YYYY-MM-DDformat, and sometimes date range objects, to the disabled prop of the DatePicker component. -
We’ve confirmed via console logging immediately before rendering the DatePicker that the problematic date (e.g.,
2025-06-28in the example below) is indeed present in the disabledDates array being passed to the component. -
Example disabledDates array logged when visibleMonth is {year: 2025, month: 6} and
2025-06-28appeared enabled:
[{"start":"1970-01-01","end":"2025-05-20"},{"start":"2025-07-21","end":"2999-12-31"},"2025-06-01","2025-06-04","2025-06-05","2025-06-06","2025-06-07","2025-06-08","2025-06-11","2025-06-12","2025-06-13","2025-06-14","2025-06-15","2025-06-18","2025-06-19","2025-06-20","2025-06-21","2025-06-22","2025-06-25","2025-06-26","2025-06-27","2025-06-28","2025-06-29"]
-
As you can see,
2025-06-28is part of this array. -
Functional Behavior: If the user clicks on such a visually “enabled” (but technically disabled) date like
2025-06-28, the onChange event fires with that date. Our application logic then correctly identifies it as an invalid selection (because it’s in our master list of disabled dates) and auto-corrects to a valid date. This confirms the date is functionally disabled by our broader app logic, but the DatePicker’s initial visual representation is misleading. -
Expected Behavior: The date
2025-06-28(and others in the array) should visually appear disabled in the calendar (e.g., greyed out, different cursor, not appearing as a clickable target) because its string representation is included in the disabled prop array.
Example Scenario & Recurring Nature:
-
The disabledDates prop is set to the array shown above.
-
The calendar for June 2025 is displayed.
-
2025-06-28(a Saturday) visually appears enabled, similar to selectable Mondays/Tuesdays (e.g., June 30th, which is not in the disabled array). -
User clicks
2025-06-28. -
onChange fires with
2025-06-28. Our app logic then intervenes to correct the selection. -
We have observed this behavior before (I am co-founder of Flare: Delivery Date Picker - Flare - Delivery Date Picker App on Shopify | Shopify App Store - we use the datepicker for 500+ merchants), where other random dates, confirmed to be in the disabled prop array, also incorrectly appear as enabled in the calendar. This behavior usually occurs when the disabled array contains a larger amount of disabled dates. When it contains just one or two disabled dates, it never happens.
Could you please investigate why a date passed in the disabled prop array might not be receiving the correct visual styling to indicate it’s disabled? This can lead to user confusion as they might attempt to select dates that are not actually available according to our business logic.
Let me know if any further details or a minimal reproduction case would be helpful.
Screenshot of this occurring in checkout:
Thanks!