[bug]: Date Picker decrements day by one when focus state changes

[zoutiyx]

Describe the bug

The day selected using the Date Picker decrements by one when the focus state changes with a click/press/tab, out of the input field. If the day of the current month is 1 before the click, it goes down to the last day of the previous month when the focus changes.

date-picker-focus-bug.mov

Affected component/components

Date Picker

How to reproduce

1. Select any date in Component
2. Click/press/tab out of the input field

Codesandbox/StackBlitz link

https://imgur.com/a/hHCA2DV

Logs

No response

System Info

Safari 17.4.1 => https://shadcn-solid.com/docs/components/date-picker

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[hngngn]

Can you check the preview in #86 to see if this is still happening?

[hngngn]

I've tried several browsers, but I can't reproduce the problem you're having, even on the main site.

[zoutiyx]

Can you check the preview in #86 to see if this is still happening?

It is still happening in the preview. I tried using Safari, Brave and Google Chrome on Mac and Windows.

[hngngn]

I've tried it on Windows and Mac too, but everything seems to be working fine.

[zoutiyx]

I am unsure of the origins of this bug, but it is still present on Windows and Mac for the latest preview. Any idea how this issue can be narrowed down?

[hngngn]

I'm sorry, but I cannot fix a bug that I have not encountered. I have tried many things but cannot replicate the issue.

[hngngn]

Have you tried it on a new project yet?

[zoutiyx]

Yes, I have. I even used [email protected] to no avail.

Steps to reproduce the bug using the deployment link below:

1. Select a random date in the picker
2. Click out of the picker input box

You can check it out here: https://shadcn-solid-date-picker-28f413o1r-zoutiyxs-projects.vercel.app

[hngngn]

Screen.Recording.2024-06-19.at.11.20.41.mov

[hngngn]

Try to remove this. If it does not solve the problem, then the issue is not with my component but with the library itself.

shadcn-solid/apps/www/src/registry/tailwindcss/ui/date-picker.tsx

Lines 34 to 38 in 5d47357

	format={e =>
	new Intl.DateTimeFormat("en-US", {
	dateStyle: "long"
	}).format(new Date(e.toString()))
	}

[zoutiyx]

It works expectedly now.

I removed the recommended lines here: https://shadcn-solid-date-picker-1687j1d96-zoutiyxs-projects.vercel.app

[zoutiyx]

This "fix" resolves the issue. It seems timezone related or an issue with the way the dates are handled in the format function.

format={(e) => {
        const parsedDate = new Date(Date.parse(e.toString()));

        const normalizedDate = new Date(
          parsedDate.getUTCFullYear(),
          parsedDate.getUTCMonth(),
          parsedDate.getUTCDate()
        );

        return new Intl.DateTimeFormat("en-US", {
          dateStyle: "long",
        }).format(normalizedDate);
      }}

See it here: https://shadcn-solid-date-picker-n9nsihjlk-zoutiyxs-projects.vercel.app