Weekday header broken on versions 8 and 9, produces serious overlapping

[visekinc]

Describe the bug
On version 8 and 9 the repo there is a weird header bug with the weekday length. It's fine on 7 for some reason.

To Reproduce
simply use the datepicker with the code I have provided on version 8 or 9.

Expected behavior
Refer to screen shots for version 7 behaviour.

Screenshots
Version 7 proper look:

Version 8 or 9 broken week header:

Desktop (please complete the following information):

• OS: linux mint 23
• Browser firefox
• Version 152

Code used:
DatePickerForm.txt

Additional Details
Nextjs 16.2.6
React 19.2.3

[SaiBalaji202]

Hi,
I tried the same example you shared, the UI is not breaking for me.

[franmc01]

The overlap in your screenshot happens when the stylesheet being loaded does not match the installed JS version. Since v8.5.0 the weekday header renders the full day names ("Sunday", "Monday") in visually hidden spans for screen readers, and the rule that hides them (.react-datepicker__sr-only) ships in the package CSS. Your broken screenshot shows those spans unhidden, which means the CSS reaching the browser predates v8.5 (a vendored v7 copy, a CDN link pinned to an older version, or a stale build cache). I audited the published bundles on npm from 7.7.0 through 9.1.0 and every 8.x/9.x release ships the matching rule in all CSS variants, which is also why it does not reproduce for @SaiBalaji202 above.

To fix it on your side, make sure the CSS comes from the same installed package, for example import "react-datepicker/dist/react-datepicker.css", and that no copied or pinned older stylesheet is loaded anywhere in the app.

I also opened #6305, which applies the visually hidden styles inline so a mismatched stylesheet degrades gracefully (you would just see the short names, with no overlap) instead of breaking the header.

[visekinc]

So I had a chance to implement the changes and it looks like I was actually running a custom css setup for the page. Reason I did that originally looks like a loading misconfiguration causing a constant break in the css for nextjs:

Having it at the bottom fixes it and allows loading of the css.