Datetime Picker: cannot clear value after entering all sections

[Code-DJ]

As the title suggests, once you enter the complete date or date and time (depending on the component) you cannot hit backspace or delete to clear out any of the sections. You can do so as long as the date is still incomplete.

For example, in https://shadcnui-expansions.typeart.cc/docs/datetime-picker#Date picker or Time picker Enter 2/2/2 in the Date Picker. Try to backspace or delete any of the sections, it won't work. Refresh the page, enter 2/2 in the Date Picker. Try backspace and see that it clears or the section.

[hsuanyi-chou]

In order to use jsDate, we can not set a wrong time while editing. The react-aria has its own format to save the value and you have to parse it to date when you need it.

option 1: add a remove button to clear. Not a beautiful way.

option 2: We can’t just use JsDate. I have to expose the react-aria value. We parse to js date when we need.

I am still thinking which option is better. How do you think 🤔?

[Code-DJ]

Hi, I am not completely sure of the code but I assume that jsDate is null until a complete date (or datetime) is entered by the user. I assume it happens here https://github.com/hsuanyi-chou/shadcn-ui-expansions/blob/fd372cf40bbac790381934399a44a0ec3eed896a/components/ui/datetime-picker.tsx#L329-L339

Is state.value coming from react-aria? Thinking when react-aria is invalid we somehow need to set jsDate back to null.

[hsuanyi-chou]

Most of the time we are using controlled component (by giving value and onChange. i.e., jsDate and onJsDateChange here) Simply set to null will cause the whole fields to be empty.

[hsuanyi-chou]

Yes, stare.value is coming from react-aria.

[hsuanyi-chou]

Hi, After a deep consideration, I decide to take option 1: just add a remove button.

Reason:

1. We can simply use jsDate and onJsDateChange to control our value. The JS Date we are familiar with.
2. We don't have to dig in react-aria when we just need a simple datetime-picker and customize tailwind to match our design.
3. You only need to dig in react-aria when you want to take a fully control of the datetime-picker. That's the time you have to learn more from react-aria doc.

You can visit datetime picker to copy the code again.

[Code-DJ]

Thank you! works!

[TylerJNewman]

Was able to solve this for me by changing the value to defaultValue