search

aboveyunhai / chakra-dayzed-datepicker

Chakra UI + Dayzed = datepicker
https://aboveyunhai.github.io/chakra-dayzed-datepicker/
MIT License
222 stars 46 forks source link

Unable to edit date from input #46

Open L2Develop96 opened 1 year ago

L2Develop96 commented 1 year ago

I can't find a way to edit the date directly from the input field without having to open the date picker.

aboveyunhai commented 1 year ago

I think a lot of troubles is actually coming from the <input /> trigger and <popover/> wrapper on top of the calendar panel, as well as the accessibility issue, data binding, let me decouple the entire panel in the next version (this weekend hopefully), and come up an example how to update the data so you can use whatever trigger you want other than input, render calendar anyway. So I can put the focus on the calendar panel itself.

In fact, I always recommend ppl copy paste the src code into their project and modify whatever they want, because this lib is pretty lightweight. I believe chakra team is building the datepicker, just not sure when it will be done, after that, I will probably make the recommendation to the official one.

JacobwBruce commented 11 months ago

Hi! Is there any update on this? I'm still having this issue on the latest version (0.2.9)

aboveyunhai commented 11 months ago

Hi! Is there any update on this? I'm still having this issue on the latest version (0.2.9)

Unfortunately no, since the default input is a popover trigger now, make it editable will cause confusing behavior, we don't know whether you want to open the panel or edit the input when you click the input. At least it's not possible for the current input wrapper. I think you might want to create your own input wrapper to mimic the correct HTML datepicker behavior. The latest version separates the calendar from input. check the calendar example: https://aboveyunhai.github.io/chakra-dayzed-datepicker/

L2Develop96 commented 11 months ago

Hi! Is there any update on this? I'm still having this issue on the latest version (0.2.9)

Unfortunately no, since the default input is a popover trigger now, make it editable will cause confusing behavior, we don't know whether you want to open the panel or edit the input when you click the input. At least it's not possible for the current input wrapper. I think you might want to create your own input wrapper to mimic the correct HTML datepicker behavior. The latest version separates the calendar from input. check the calendar example: https://aboveyunhai.github.io/chakra-dayzed-datepicker/

Why not just make a button next to the input where you can open/close it from there? And make the input editable and doesn’t trigger the calendar when clicked ? Because in the example you shared, once I click on the input it still opens the calendar.

aboveyunhai commented 11 months ago

@L2Develop96 The reason is pretty simple, I didn't think that much when I create the lib, nor caring about the default html datepicker behavior (feel free to call me stupid)😅. it was just a copy&paste demo I used at the beginning. So the easiest way to just create a new datepicker component or variant prop to the one you refer and without breaking anything, and then release it in the next version.