47ng / nuqs

Type-safe search params state manager for React frameworks - Like useState, but stored in the URL query string.
https://nuqs.47ng.com
MIT License
4.91k stars 105 forks source link

doc: Fix date inputs on Chrome #704

Closed mehm8128 closed 1 month ago

mehm8128 commented 1 month ago

I found the issue that on the docs Date inputs don't work well. https://nuqs.47ng.com/docs/parsers/built-in#dates--timestamps

if we click now button, date successfully filled to the input and demo is working well, but if we it manually selecting the date and time, selected value is not filled. This is because we can't valueAsDate for the input tag with datetime-local, so I fixed it.

I think this might be the same with the code below, but I don't know how I open the page of it so I can't debug it. https://github.com/mehm8128/nuqs/blob/fix/docs-date-input/packages/docs/src/app/playground/_demos/parsers/page.tsx#L92-L109

vercel[bot] commented 1 month ago

@mehm8128 is attempting to deploy a commit to the 47ng Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nuqs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 24, 2024 8:03am
franky47 commented 1 month ago

That's interesting, it works on my end (Firefox 131), but you have to select the time too (as it's a datetime picker). What browser are you on that doesn't give you valueAsDate?

https://github.com/user-attachments/assets/008a8e68-8e35-4398-9329-ff8bcaef029e

Note: I get the same behaviour with the preview deployment: https://nuqs-5ysucs2vb-47ng.vercel.app/docs/parsers/built-in#iso-8601

franky47 commented 1 month ago

Don't worry about the playground/_demos, those are parked examples from the old playground that I haven't ported to the new docs, they'll probably go away at some point.

mehm8128 commented 1 month ago

Thank you, I understand. I use Chrome 129. I tried to use firefox and I successfully filled as you showed.

This is my record trying to fill date with three methods.

  1. open the calendar and select date and time (on chrome there is also time selector) -> can't fill date and time
  2. input date and time (2024/10/24 17:15) -> trying to fill minutes, form was reset
  3. click Now button -> successfully filled

Please try it on Chrome!

https://github.com/user-attachments/assets/38dace61-1c90-40a4-a9be-249fbb17f656

fyi: my record in the preview environment for this PR. I successfully fill date and time

https://github.com/user-attachments/assets/26062e22-fb88-4d07-8f03-0c0432edbbe0

github-actions[bot] commented 1 month ago

:tada: This PR is included in version 2.0.4 :tada:

The release is available on:

Your semantic-release bot :package::rocket: