doc: Fix UTC date inputs

47ng · Oct 29, 2024 · 89f2b02 · 89f2b02
1 parent b5c0168
commit 89f2b02
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/docs/content/docs/parsers/built-in.mdx b/packages/docs/content/docs/parsers/built-in.mdx
@@ -179,7 +179,7 @@ parseAsStringEnum<Direction>(Object.values(Direction))
 
 ## Dates & timestamps
 
-There are two parsers that give you a `Date` object, their difference is
+There are three parsers that give you a `Date` object, their difference is
 on how they encode the value into the query string.
 
 ### ISO 8601 Datetime
@@ -194,8 +194,6 @@ import { parseAsIsoDateTime } from 'nuqs'
 
 ### ISO 8601 Date
 
-Note: the Date is parsed without the time zone offset, making it at GMT 00:00:00 UTC.
-
 ```ts
 import { parseAsIsoDate } from 'nuqs'
 ```
@@ -204,6 +202,11 @@ import { parseAsIsoDate } from 'nuqs'
   <DateISOParserDemo />
 </Suspense>
 
+<Callout>
+  The Date is parsed without the time zone offset, making it at 00:00:00 UTC.<br/>
+  <span className='block mt-1.5'>_Support: introduced in version 2.1.0._</span>
+</Callout>
+
 ### Timestamp
 
 Miliseconds since the Unix epoch.

diff --git a/packages/docs/content/docs/parsers/demos.tsx b/packages/docs/content/docs/parsers/demos.tsx
@@ -262,16 +262,21 @@ export function DateParserDemo({
           <input
             type={type}
             className="flex h-10 flex-[2] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-            value={value === null ? '' : value.toISOString().slice(0, -8)}
+            value={
+              value?.toISOString().slice(0, type === 'date' ? 10 : 19) ?? ''
+            }
             onChange={e => {
               if (e.target.value === '') {
                 setValue(null)
               } else {
-                setValue(new Date(e.target.value))
+                // Force back the date to UTC to avoid lossy SerDe conversion.
+                // We could use the valueAsDate, but it's not supported in Chrome.
+                // See https://github.com/47ng/nuqs/pull/704
+                setValue(new Date(e.target.value + 'Z'))
               }
             }}
           />
-          <span className="px-2 text-zinc-500">UTC</span>
+          <span className="px-2 font-medium text-zinc-500">UTC</span>
         </div>
         <div className="flex flex-1 gap-2 @md:flex-initial">
           <Button