onesine / react-tailwindcss-datepicker

Modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker.
https://react-tailwindcss-datepicker.vercel.app/
MIT License
552 stars 169 forks source link

Duplicated week days bug #273

Open DreamDevourer opened 2 months ago

DreamDevourer commented 2 months ago

Hi, this is weird, but it seems this bug is also happening on the demo page and on my local project:

Screenshot 2024-09-02 at 11 10 13 PM Screenshot 2024-09-02 at 11 10 40 PM

Wednesday is duplicated and Saturday does not show up at all. Why this is happening?

DreamDevourer commented 2 months ago

Oh wow, actually this is completely unstable - If I jump on Safari or Firefox, the result is completely different. On Safari, it only shows "Wed Thu Fri" at the end, and all the other are missing for some reason. Something similar happens on Firefox, only difference is that Sunday and Monday are missing.

Both screenshots I sent before were from Arc - which is a chromium based browser...

ian-whitestone commented 1 month ago

@onesine any thoughts on this issue?

leonelhenriquez commented 4 weeks ago

The error occurs because the week is iterated using the JavaScript Date constructor as a string, which causes variations between the actual day.

Example of how it's iterated and its result:

new Date('2022-11-6')  // -> Sun Nov 06 2022 00:00:00 GMT-0600
new Date('2022-11-7')  // -> Mon Nov 07 2022 00:00:00 GMT-0600
new Date('2022-11-8')  // -> Tue Nov 08 2022 00:00:00 GMT-0600
new Date('2022-11-9')  // -> Wed Nov 09 2022 00:00:00 GMT-0600
new Date('2022-11-10') // -> Wed Nov 09 2022 18:00:00 GMT-0600
new Date('2022-11-11') // -> Thu Nov 10 2022 18:00:00 GMT-0600
new Date('2022-11-12') // -> Fri Nov 11 2022 18:00:00 GMT-0600

If we iterate using the Date(year, month, day) constructor, these variations do not occur:

new Date(2022,10,6)  // -> Sun Nov 06 2022 00:00:00 GMT-0600
new Date(2022,10,7)  // -> Mon Nov 07 2022 00:00:00 GMT-0600
new Date(2022,10,8)  // -> Tue Nov 08 2022 00:00:00 GMT-0600
new Date(2022,10,9)  // -> Wed Nov 09 2022 00:00:00 GMT-0600
new Date(2022,10,10) // -> Thu Nov 10 2022 00:00:00 GMT-0600
new Date(2022,10,11) // -> Fri Nov 11 2022 00:00:00 GMT-0600
new Date(2022,10,12) // -> Sat Nov 12 2022 00:00:00 GMT-0600

I have created a pull request with the solution.

275 ([Fix 🐛] Update date format in Week component)

ddematheu commented 2 weeks ago

Any timeline to have this fix merged?