Controlled Datetime Picker's calendar doesn't correctly set start state value

[CoderJoshDK]

The controlled datetime picker will start you on a blank calendar view, despite a jsDate being passed in. For example:

  const [startDate, setStartDate] = useState<Date>(new Date("2024/01/01"))
  return (<DateTimePicker
          jsDate={startDate}
          onJsDateChange={setStartDate}
          showClearButton={false}
        />)

Will put you in a null state. As if there is no currently selected date. Everything else works correctly, though.

I came up with a solution that is working for me. I don't know if there are issues with it, though. Two minor changes are required to fix this issue. The first is to update the useEffect:

   useEffect(() => { 
     /** 
      * If user types datetime, it will be a null value until we get the correct datetime. 
      * This is controlled by react-aria. 
      **/ 
     if (state.value) { 
       const date = parseDateTime(state.value.toString()).toDate(getLocalTimeZone()); 
       setJsDatetime(date); 
       onJsDateChange?.(date); 
+     } else if (jsDate) {
+      state.setValue(currentValue())  
     }
   }, [state.value, onJsDateChange]); 

As you can see, the state is not being correctly set.

However, doing this, breaks the clear function. So, to fix that:

        <X
          className={cn('h-5 w-5 cursor-pointer text-primary/30', !jsDatetime && 'hidden')}
-          onClick={() => setJsDatetime(null)}
+          onClick={() => {
+             setJsDatetime(null)
+             state.setValue(null)
+           }}
        />

These are all in https://github.com/hsuanyi-chou/shadcn-ui-expansions/blob/6a3eea2c78a02fc7db3b772b8bbc858589cbe48f/components/ui/datetime-picker.tsx#L285

I ran into this issue and the fix (or at least fixes it for me) in Vite.

Package Versions

I can try to get a minimal repo going for you if you need. Just let me know. (I know this is not the most helpful list) ``` ├── @hookform/resolvers@3.3.4 ├── @radix-ui/react-accordion@1.1.2 ├── @radix-ui/react-alert-dialog@1.0.5 ├── @radix-ui/react-avatar@1.0.4 ├── @radix-ui/react-checkbox@1.0.4 ├── @radix-ui/react-collapsible@1.0.3 ├── @radix-ui/react-dialog@1.0.5 ├── @radix-ui/react-dropdown-menu@2.0.6 ├── @radix-ui/react-icons@1.3.0 ├── @radix-ui/react-label@2.0.2 ├── @radix-ui/react-popover@1.0.7 ├── @radix-ui/react-radio-group@1.1.3 ├── @radix-ui/react-select@2.0.0 ├── @radix-ui/react-separator@1.0.3 ├── @radix-ui/react-slot@1.0.2 ├── @radix-ui/react-switch@1.0.3 ├── @radix-ui/react-tabs@1.0.4 ├── @radix-ui/react-toast@1.1.5 ├── @radix-ui/react-tooltip@1.0.7 ├── @tabler/icons-react@3.3.0 ├── @tanstack/react-query@5.35.5 ├── @tanstack/react-table@8.16.0 ├── @trivago/prettier-plugin-sort-imports@4.3.0 ├── @types/bun@1.1.1 ├── @types/react@18.3.1 ├── @types/react-dom@18.3.0 ├── @types/react-syntax-highlighter@15.5.13 ├── @typescript-eslint/eslint-plugin@7.8.0 ├── @typescript-eslint/parser@7.8.0 ├── @vitejs/plugin-react-swc@3.6.0 ├── autoprefixer@10.4.19 ├── class-variance-authority@0.7.0 ├── clsx@2.1.1 ├── cmdk@0.2.1 ├── date-fns@3.6.0 ├── dayjs@1.11.11 ├── eslint@9.2.0 ├── eslint-plugin-react-hooks@4.6.2 ├── eslint-plugin-react-refresh@0.4.7 ├── postcss@8.4.38 ├── prettier@3.2.5 ├── prettier-plugin-tailwindcss@0.5.14 ├── react@18.3.1 ├── react-aria@3.33.0 ├── react-day-picker@8.10.1 ├── react-dom@18.3.1 ├── react-hook-form@7.51.4 ├── react-router-dom@6.23.1 ├── react-stately@3.31.0 ├── react-syntax-highlighter@15.5.0 ├── recharts@2.12.7 ├── tailwind-merge@2.3.0 ├── tailwindcss@3.4.3 ├── tailwindcss-animate@1.0.7 ├── typescript@5.4.5 ├── vite@5.2.11 └── zod@3.23.8 ```

[hsuanyi-chou]

I'll have a look. Thanks.

[gerkim62]

what is the "official" fix for this issue