[Feature request] Open time picker if time is clicked or date picker if date is clicked

[dominic-p]

What problem does this feature solve?
I'm using Nextcloud Calendar which uses this date picker for setting calendar event dates and times. In general it works great, but I feel the flow for selecting an event time could be faster. Right now in order to select a time we do:

1. Click on the date picker
2. Click "select time"
3. Click the hours/minutes/seconds

I think we could remove step 2 by listening for where the user clicks. If they click on the time, show the time picker, if they click on the date, show the date picker.

What does the proposed API look like?
Maybe a setting switch "prop" that could enable this functionality? I'm not really a Vue guy, so I'm not sure what the right terminology is.

That's my 0.02. Thanks for sharing this great component. :)

[mengxiong10]

There is already a prop showTimePanel to implement this feature.
You can use two elements to display date and time respectively, and then set showTimePanel.

[dominic-p]

Thanks for the response. I appreciate it. I'm not sure if the Nextcloud team will want to split up the date/time picker into two separate elements though. The UI might start to look cluttered.

Would it be possible to do this while keeping everything in one element and just detecting where the user clicked?

[mengxiong10]

It can also be calculated based on evevt.clientX.

[dominic-p]

Ok, so we could detect the coordinates of the mouse click and see if they are over the time element and then set showTimePanel if they are?

I'm trying to understand the code. It looks like all clicks on the component are handled here. But, I don't see an event type object. Would it be possible to know in that event handler which element was clicked (like with an event.target attribute)? Then, maybe that information could be added to the follow up event this.$emit('open'); which I'm assuming consuming projects could listen for?

I apologize. I'm still trying to understand how Vue works. I would be happy to learn and put together a PR if that would be helpful, but I could use a bit of guidance on how the component works.

[mengxiong10]

Yes, I'll add the object event for event open.

[dominic-p]

Thanks for doing that! I appreciate it. So, now the high level process to open the time picker if the time is clicked would be:

1. Listen for the open event.
2. Check the event.target.
3. If it's the time element, set showTimePanel = true, otherwise do nothing and allow default behavior.

Is that correct?

[mengxiong10]

fyi: https://codesandbox.io/s/open-time-panel-8wm3g?file=/src/App.vue

[dominic-p]

That's awesome! Thank you so much for putting that together. :) I think this issue is pretty much wrapped up at this point.