No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [v1] QDate & QTime does not have ok/cancel button to dismiss the dialog

    Framework
    11
    24
    2697
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      prathabk last edited by

      The Date and Time picker does not have ok/cancel button to dismiss the dialog. Either user has to change focus by clicking outside the dialog or pressing Esc button.
      0_1551089519814_b6f90aeb-5657-421b-89be-ade476746d56-image.png

      Sometimes user might be clueless what to do after making the selection, so it would be better to show an Ok button to acknowledge that the user has completed the selection.

      Or is there a workaround to add a button to the QDate component?

      1 Reply Last reply Reply Quote 3
      • s.molinari
        s.molinari last edited by

        If you click a date (make a selection), the dialog closes. Why should the user be clueless after that?

        Scott

        J 1 Reply Last reply Reply Quote 0
        • D
          DevinH last edited by

          What if the user opens the dialog, but then decides not to make a change? I’d still think that clicking outside the dialog would suffice, but that’d be problematic for a full screen dialog. Unless clicking on the already-selected date would also close the dialog… not the most UX friendly.

          1 Reply Last reply Reply Quote 0
          • D
            DevinH last edited by

            Reviewing the Material Design specs, this type of dialog is what’s known as a Simple Dialog.

            Simple dialogs without actions
            Simple dialogs allow users to act on selected elements, without action text. For example, users can simply select a list item to take action on it.

            I think a good future enhancement would be if we could pass a bool (probably named ‘simple’) to convert to/from a Simple Dialog

            1 Reply Last reply Reply Quote 0
            • P
              prathabk last edited by

              @s-molinari The dialog does not close after selecting the date and that is the issue. The user has to click outside the dialog to dismiss it. https://codepen.io/kali123/pen/BbarYZ

              So it would be better to provide an action button to dismiss the dialog. Or even if the dialog closes after selecting the date/time that would be better.

              1 Reply Last reply Reply Quote 2
              • s.molinari
                s.molinari last edited by s.molinari

                @prathabk - I could swear the closing of the dialog after a date selection (the day) was the normal behavior. You are right, without that behavior, it’s not good UX.

                There is a way to get it done. Found in the dev examples in the Quasar source code.

                https://codepen.io/smolinari/pen/ywLRVJ

                Now you can argue, the date picker shouldn’t hide, when a year or month is selected. 🙂 Theoretically, you can create that logic yourself, but maybe there could be an @input-year, @input-month and @input-day events to catch what is needed outside the component?

                Scott

                1 Reply Last reply Reply Quote 2
                • P
                  prathabk last edited by

                  @s-molinari Thanks for the workaround. Will try it out.

                  1 Reply Last reply Reply Quote 0
                  • s.molinari
                    s.molinari last edited by s.molinari

                    Actually, it’s not a workaround. The methods you’d normally find in QDialog or QMenu for showing and hiding them aren’t there anymore in v1.0. They are in QPopupProxy.

                    https://v1.quasar-framework.org/vue-components/popup-proxy

                    You can also control the transition of the popup with it. 😁

                    Scott

                    1 Reply Last reply Reply Quote 0
                    • P
                      prathabk last edited by

                      @s-molinari The issue is about the UX of dismissing the dialog. In the earlier version, the QDatetime (https://quasar-framework.org/components/datetime-input.html) had the Cancel and Set buttons which are missing in the v1 QDate & QTime. If those buttons are included in v1 that would be better.

                      1 Reply Last reply Reply Quote 0
                      • s.molinari
                        s.molinari last edited by

                        I believe the idea is to pull back on those features from a framework standpoint and let devland decide to build them out (or not). Which, is possible to do fairly easily. 🙂

                        Scott

                        lucasfernog 1 Reply Last reply Reply Quote 0
                        • P
                          prathabk last edited by

                          @s-molinari I am not a Javascript expert. I tried adding a button, but it always appending to the q-date dialog. https://codepen.io/kali123/pen/drYwbL

                          Is there a way we can set the button inside the q-date dialog like in the previous version? Or dismiss the dialog only in the case selecting the day and not during month/year selection?

                          1 Reply Last reply Reply Quote 0
                          • lucasfernog
                            lucasfernog @s.molinari last edited by

                            @s-molinari Actually, QDate does not have slots, so I don’t know if it’s that easy

                            1 Reply Last reply Reply Quote 0
                            • s.molinari
                              s.molinari last edited by

                              I found a couple of ways to do what you are looking for. QPopupEdit being the easiest.

                              https://codepen.io/smolinari/pen/GepzNO

                              Scott

                              1 Reply Last reply Reply Quote 0
                              • metalsadman
                                metalsadman last edited by

                                can’t complain, but many features removed which is kinda sad, i don’t understand the regression. gotta stick to 0.17 for now or back to native.

                                1 Reply Last reply Reply Quote 0
                                • s.molinari
                                  s.molinari last edited by s.molinari

                                  I would guess the decision to pull back on features is because with too many features added, a framework actually paints the devland devs into a corner. Yes, many will like the features being there, like everyone here asking for them. But, a lot more will want something different. If a framework has given a certain feature a certain way, it’s then “baked in” and it’s hard to change or customize. So every request after making that feature for something different has to be ignored or we have to tell developers, “It is what it is. Lump it or like it.” Or, the feature is changed and we have feature churn. All of that can and most likely will be a source of frustration for everyone.

                                  A framework should make smart decisions for developers. It shouldn’t make all of them and not even most of them. If you want a system that makes a lot more decisions and does a lot of the work for you, then you either need a framework that offers extensions (like Quasar), where devland devs share their “decisions” and work with others. Or, you need to find a platform that uses Vue and makes a ton of decisions (and does a lot of work up front) for you. Vue in and of itself is also built with the extensibility idea in mind. Vue CLI and plug-ins is ingenious and a step above what React has.

                                  Quasar has taken a parallel track to Vue’s extensibility now.

                                  And, a platform hasn’t been built yet on Vue, and yes Quasar, with a good bit of work and a lot of additional decision making, could become a platform too. 😉

                                  Scott

                                  1 Reply Last reply Reply Quote 0
                                  • E
                                    Eelke last edited by

                                    [upvote this issue]

                                    Someone find a sollution allready? It is annoying that the QDate-dialog does not close after selecting.

                                    The sollution:
                                    <q-popup-proxy ref=“qDateProxy” …
                                    <q-date @input="$refs.qDateProxy.hide()"…

                                    is ugly and, indeed, close the dialog at year or month selection.

                                    1 Reply Last reply Reply Quote 1
                                    • M
                                      mKomo last edited by mKomo

                                      This is kind of hacky however I used the following although this uses a dialog instead:

                                      <q-dialog v-model="date">
                                           <q-date v-model="post.date" today-btn @click="date=false" />
                                      </q-dialog>
                                      1 Reply Last reply Reply Quote 0
                                      • E
                                        Eelke last edited by

                                        Yes, a quick and dirty workaround… 😉

                                        It’s such a normal and predictable kind of functionality… it should be a property of the component: ‘closeonselect = [true/false]’…

                                        1 Reply Last reply Reply Quote 0
                                        • J
                                          jitendra16 last edited by

                                          It will be better to emit an ‘input-date’ event for only date so that we can close popup-proxy on that event. Currently event name ‘input’ emitted for all three selection( i.e. ‘year’, ‘month’ and date) so we can not guess that user has selected final date to close date picker.

                                          1 Reply Last reply Reply Quote 0
                                          • J
                                            jitendra16 @s.molinari last edited by

                                            @s-molinari its not happening in v1 for code below
                                            <q-popup-proxy>
                                            <q-date minimal v-model=“date”/>
                                            </q-popup-proxy>

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post