QTime, QDate: Add @option-click event

[iliubinskii]

Motivation 1:

I want to:

1. Auto-close QDate popup after user finished date selection.
2. Auto-close QTime popup after user finished time selection.

I consider that:

1. User finished date selection if he clicked on Day button.
2. User finished time selection if he clicked on Minute button.

I do not want user to make an extra click on "Close" button in such situations. I believe that clicking Day/Minute button is sufficient indication that he finished.

Motivation 2:

Pay attention how selecting hour in QTime auto-switches to minutes view.

I want to do similar when user selects day of month, i.e.:
When user selects day of month I want to auto-switch from QDate to QTime, so that user can smoothly continue selecting hours.

---

Problem:

Current QTime and QDate components are not flexible enough to achieve what I described above.

For example, QTime has only @update:model-value event.
But I do not fill safe to use it for my purpose because it does not say that model change is always the result of button click and never anything else.
Also, I do not find it to be most reliable to compare old and new model to understand what was clicked: minutes or hours.

---

Solution:

Add @option-click event.
Event should contain:

1. Button kind (minutes, hours, days, months, etc)
2. Button value (1, 2, 3, etc)
3. New model value

[MilosPaunovic]

Add a ref and close after selection.
https://codepen.io/milospaunovic/pen/JjOPNZL?editors=1010

[54mu3l]

This was possible in Quasar V1 but is no longer possible in Quasar V2. (because of this change: #13562)

[iliubinskii]

Hi,

Thx for suggestion.

I undestand the possibility of using update:model-value.

It is not as easy as in your examle:
Your example closes QTime after selecting hour - this is not desired because minutes are not yet selected.

But my main concern is that nobody says that model value changes (and will always change) only as a result of a click.
This means that if I use model value there is a possibility of unexpected behaviour.
This a kind of hacking I prefer to avoid.

For this reason, I would prefer to rely on @option-click event.

[54mu3l]

Here are similar discussions:

• QTime emit current view (hours, minutes, ...) #13874
• QTime: adding a prop to manage both emit model-value behaviors (Qv1 and Qv2) #13873
• More control over QTime view-state #13875
• Feature request: QTime: minimal, v-model:pm, v-model:step props #12187

[DevBodin]

After far too long trying to figure out what was going on in my own code, this was a frustrating endpoint.

For those looking for any sort of solution: in your @update:model-value function, simply set a flag like this:

if (this.selected_time === null) {
    this.selected_time = true;
    return;
}
this.selected_time = null;

And then make sure to also clear the flag on the q-popup-proxy @close event.

For 99% of the time, this will work for hour+minute selection.

(Obviously, this is far from ideal, but these issues have been sitting for years now, so hopefully this will be someone's "better than nothing.")