Quasar: Bug: DateTime picker emits "input" and "change" event when changing months

Created on 14 Jan 2018  路  6Comments  路  Source: quasarframework/quasar

ACTUAL:
Clicking to change month emits "input" and "change" events that incorrectly reports that the user intentionally chose the same date in the following month

EXPECTED:
When changing the month, no "input" or "change" event should be emitted... until the user actually chooses a date in the new month

Most helpful comment

@rstoenescu Thanks, I implemented the lazy input. Now it's behaving correctly and only emits change when a user clicks away, but there is a usability issue.

For example when a user has 4/10/2018 selected and opens up the date picker, they switch the month to May, the 10 is still highlighted as if the user has selected 5/10/2018. If the user clicks out of the datepicker the new date is selected.

How it should be: The user has 4/10/2018 selected and opens the date picker. They switch the month to May, the 10 is not highlighted because the user has not selected 5/10/2018, they still have selected 4/10/2018 so the 10 in 5/10/2018 should not be highlighted.

All 6 comments

In 0.15 the behavior will be configurable:

  • input events are emitted on any change
  • change event is emitted on close, if the new value is different from the one passed to the control (the model)

So:

  • if used with v-model the behavior will be that the model changes on each change in the control
  • if used with the upcoming v-model.lazy (or with :value="model" @change="value => model = value" @input="value => DO_SOMETHING_ON_EACH_CHANGE") the model will only change on control close

User expectation with a date picker is:

  1. the user clicks something because they want to choose a date

  2. a datepicker appears, they can either choose a date in the current month, or navigate to a different month and choose a date

  3. immediately upon choosing a date, the datepicker closes (it's annoying, once a date is chosen, to then have an extra unnecessary click on a "set" button)

So what's needed is a config option to not show the superfluous "clear", "cancel" and "set" buttons, and have a click on a date emit the date chosen and close the control.

@jmellicker Hi, all three points are implemented for future v0.15 already. And there's something more, that applies to all form components: you can even configure if you want lazy-update (listening on the @change event instead of on @input). This is as a preparation for when a PR for Vue is going to be merged in (will happen in near future).

Working on demos and docs to release v0.15 asap.

@rstoenescu q-datetime still sends an event for @change and @input when switching months. Is this a known issue? The datepicker should only send events when a user actually selects a new date.

@Surenapetrosyan Use lazy input (check docs). Also check this comment: https://github.com/quasarframework/quasar/issues/1803#issuecomment-374334078

@rstoenescu Thanks, I implemented the lazy input. Now it's behaving correctly and only emits change when a user clicks away, but there is a usability issue.

For example when a user has 4/10/2018 selected and opens up the date picker, they switch the month to May, the 10 is still highlighted as if the user has selected 5/10/2018. If the user clicks out of the datepicker the new date is selected.

How it should be: The user has 4/10/2018 selected and opens the date picker. They switch the month to May, the 10 is not highlighted because the user has not selected 5/10/2018, they still have selected 4/10/2018 so the 10 in 5/10/2018 should not be highlighted.

Was this page helpful?
0 / 5 - 0 ratings