search

nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.32k stars 840 forks source link

Custom time picker #1469

Open kalnode opened 2 months ago

kalnode commented 2 months ago

Everything is great with this library however the time picker (hours-and-minutes) leaves much more to the imagination.

It seems picking hours-and-minutes is resigned to just basic <select> elements, which has plenty of limitations.

I have 2 issues with the time picker:

1. Cannot style the hours and minutes picker popups (because they're native <select> elements) This library has gorgeous styling and accessibility to re-style, except for the <select> popups, which, being native HTML, can't be styled (beyond basic color). With hours-and-minutes popups, all of a sudden you see clunky aesthetics that potentially don't match brand aesthetics.

2. The hours-and-minutes popups do not auto-size or auto-position themselves This library already uses popperjs for other popups (like the month popup, when clicking the month at the top), a library that offers auto-positioning features (this is what it's famous for). Moreover, popperjs is no longer supported, and it's grandchild, the new modern floating-ui library, does all of this even better. However, none of this power is applied to the time picker, because it's a native <select> element.

An example of my dilemma: One of my apps is a kiosk app (touchscreen tablet running a desktop OS and web app in a browser)... and the hours-and-minutes popup bleeds outside of the app boundary! As well I have no control over the size and position of it.

See screenshot... (the black border is the edge of my app): Screenshot from Screencast from 2024-04-12 14-19-25 webm

As it stands, I cannot use the default time picker in this library.

Solutions?

A - Slots: I see a lot of discussion about using slots to make custom calendar experiences with this library, but I don't see a reference to using slots for custom time picker popups. If the time picker were a custom popup (like the month popup), some of these issues could be resolved.

B - Only use this library for date picking, and engage another library for time picking. How they'd be presented is another issue, but in any case, both wrapped in the same component, using v-model to share data.

C - Abandon this library for an entirely different DateTime picker.

Georglider commented 3 weeks ago

Hello, I'm experiencing the same issue, what solution have you chosen?