What is the process for activating the quasar timepicker once a user has selected a time?

Question

What is the process for activating the quasar timepicker once a user has selected a time?

The functionality of the timepicker in Quasar doesn't quite meet my expectations. I don't want to add another library just for this feature. The main issue I have is that it doesn't close automatically after selecting a time. I managed to figure out how to use the date picker, but the time picker is still a challenge. The closest solution I found was to check the v-model for a value. If there is a value, I close the picker. However, the problem with this approach is that I can't reopen the picker without clearing the input field.

Here's the current workaround I implemented:

<div id="q-app">
  <div class="q-pa-md">
      <div class="q-gutter-sm row">
        <q-input filled v-model="time" mask="time" :rules="['time']">
          <template v-slot:append>
            <q-icon name="access_time" class="cursor-pointer">
              <q-popup-proxy 
                ref="qTimeProxy" 
                transition-show="scale" 
                transition-hide="scale">
                <q-time 
                   v-model="time" 
                   v-if="!time ? () => $refs.qTimeProxy.hide() : null">
                </q-time>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </div>
    </div>
</div>

This setup is not ideal and I'm looking for a way to improve it so I can reopen the picker even if a time is already selected, while ensuring that it closes after a new time is picked.

One major drawback is that this implementation does not consider AM/PM selection. Selecting a time without specifying AM or PM can be inefficient. Has anyone encountered this issue before?

For a live example, you can visit the PLAYGROUND

Thank you in advance

javascript vue.js vuejs2 quasar-framework

Answer 1

Answer №1

To make the q-time popover disappear, simply add an @input event on the element and then call a method to hide it.

<q-input
                filled
                v-model="time"
                mask="time"
                :rules="['time']"
                >
                <template v-slot:append>
                  <q-icon name="access_time" class="cursor-pointer">
                    <q-popup-proxy
                      ref="qTimeProxy"
                    >
                      <q-time
                        v-model="time"
                        @input="closeDialog"
                      ></q-time>
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>


  methods:  {
    closeDialog () {
      this.$refs.qTimeProxy.hide()
    }
  }

For a functional demonstration, visit this CodePen link - https://codepen.io/Pratik__007/pen/yLyJwWq?editors=1010

Answer 2

To make the q-time popover disappear, simply add an @input event on the element and then call a method to hide it.

<q-input
                filled
                v-model="time"
                mask="time"
                :rules="['time']"
                >
                <template v-slot:append>
                  <q-icon name="access_time" class="cursor-pointer">
                    <q-popup-proxy
                      ref="qTimeProxy"
                    >
                      <q-time
                        v-model="time"
                        @input="closeDialog"
                      ></q-time>
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>


  methods:  {
    closeDialog () {
      this.$refs.qTimeProxy.hide()
    }
  }

For a functional demonstration, visit this CodePen link - https://codepen.io/Pratik__007/pen/yLyJwWq?editors=1010

Answer 3

Answer №2

Quasar V2.15.4 has introduced a new event called @update:model-value, replacing the previous @input event.

When handling this event, the callback function should have the following signature:

((value: string | null, details: {
    year: number;
    month: number;
    day: number;
    hour: number;
    minute: number;
    second: number;
    millisecond: number;
    changed: boolean;
}) => void)

The value parameter in the callback contains the string version of the selected time, while the details object provides a detailed breakdown of the model being updated. It is crucial to note that the @update:model-value event triggers before the actual model update, allowing for comparisons between the current model value and the details object to determine when to close the pop-up.

In the snippet below, as the user selects a minute value from the time-picker, the pop-up proxy will be hidden. This behavior can be easily modified to accommodate different scenarios based on other time components being affected.

Example:
    <template>
        <q-popup-proxy
         transition-show="scale"
         transition-hide="scale"
         ref="qTimeProxy"
         cover
        >
         <q-time
          mask="YYYY-MM-DD HH:mm"
          format24h
          v-model="dateVal"
          @update:model-value="timeUpdated"
         >
          <div class="row items-center justify-end">
           <q-btn v-close-popup label="Close" color="primary"/>
          </div>
         </q-time>
        </q-popup-proxy>
    </template>

    <script>
        const dateVal = ref();    
        const timeUpdated = (
              value: string | null,
              details: {
                minute: number;
              }
            ) => {
              // Close the time popup after selecting the minute
              var curDate = dateVal.value ? new Date(dateVal.value) : null;
              if (curDate?.getMinutes() !== details.minute) qTimeProxy.value?.hide();
          }
    </script>

Answer 4

Quasar V2.15.4 has introduced a new event called @update:model-value, replacing the previous @input event.

When handling this event, the callback function should have the following signature:

((value: string | null, details: {
    year: number;
    month: number;
    day: number;
    hour: number;
    minute: number;
    second: number;
    millisecond: number;
    changed: boolean;
}) => void)

The value parameter in the callback contains the string version of the selected time, while the details object provides a detailed breakdown of the model being updated. It is crucial to note that the @update:model-value event triggers before the actual model update, allowing for comparisons between the current model value and the details object to determine when to close the pop-up.

In the snippet below, as the user selects a minute value from the time-picker, the pop-up proxy will be hidden. This behavior can be easily modified to accommodate different scenarios based on other time components being affected.

Example:
    <template>
        <q-popup-proxy
         transition-show="scale"
         transition-hide="scale"
         ref="qTimeProxy"
         cover
        >
         <q-time
          mask="YYYY-MM-DD HH:mm"
          format24h
          v-model="dateVal"
          @update:model-value="timeUpdated"
         >
          <div class="row items-center justify-end">
           <q-btn v-close-popup label="Close" color="primary"/>
          </div>
         </q-time>
        </q-popup-proxy>
    </template>

    <script>
        const dateVal = ref();    
        const timeUpdated = (
              value: string | null,
              details: {
                minute: number;
              }
            ) => {
              // Close the time popup after selecting the minute
              var curDate = dateVal.value ? new Date(dateVal.value) : null;
              if (curDate?.getMinutes() !== details.minute) qTimeProxy.value?.hide();
          }
    </script>

What is the process for activating the quasar timepicker once a user has selected a time?

Answer №1

Answer №2

Similar questions

Having trouble launching the emulator in VS Code for React Native?

AngularJS not swapping the data-url with the scope URL provided in {{ uploadUrl }}

What could be causing the asynchronous function to return a pending promise even after using the await keyword?

Difficulty with Angular JS` ng-repeat functionality

Enhancing UI Design with Styled-Components and Material Components using Media Queries

Utilize AngularFire to generate a new User and invoke the factory function to showcase notifications

Is there a method to use media queries to dynamically switch JavaScript files based on the user's device?

What is the best way to determine the quantity of elements received from an ajax request?

Leveraging webpack for requiring modules in the browser

When attempting to install Vue Js, I encounter the following npm error

Retrieve every video on React.js channel from YouTube

When using ReactJS, hovering over a row in a table should trigger a change in the background color of the corresponding row in another table with the same index

What's the Hold-Up with IntersectionObserver in Brackets?

Bringing a JavaScript function into a TypeScript file results in it being treated as a namespace

Exploring the intricacies of extracting nested JSON data in TypeScript

Clicking the checkbox does not synchronize with the table row

Exploring the intricacies of Implementing Chromecast Networks, with a curious nod towards potentially mirroring it with

Determine whether a request is for CSS or JavaScript when using NodeJS and Express

Will there ever be a possibility in the future to compile from D 2.0 to Javascript?

Ways to identify when the socket has been opened by the client?