What options are available to enable the user to input information into the v-time-picker component?

I am looking for a solution where users can input digits into the vuetify v-time-picker, while still being able to select the time on the clock.

<v-col align-self="center">
  <v-menu
    ref="menuTimeStart"
    v-model="menuTimeStart"
    :close-on-content-click="false"
    :nudge-right="40"
    :return-value.sync="startTime"
    transition="scale-transition"
    offset-y
  >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        dense
        v-model="startTime"
        label="Start time"
        prepend-icon="mdi-clock-time-four-outline"
        readonly
        :disabled="pickerDisabled"
        v-bind="attrs"
        hide-details="auto"
        :rules="rules"
        :error-messages="errorMessage"
        color="tertiary"
        v-on="on"
        class="mr-4 align-center"
      ></v-text-field>
    </template>
    <v-time-picker
      v-if="menuTimeStart"
      v-model="startTime"
      color="tertiary"
      no-title
      @click:minute="$refs.menuTimeStart.save(startTime)"
    ></v-time-picker>
  </v-menu>
</v-col>

I attempted to use an @input event but was unable to achieve the desired functionality. Any help would be appreciated. Thank you!

Answer №1

To utilize a combination of v-model and @change on a v-text-field, and then transmit the output to a v-time-picker, ensure that you properly parse/sanitize the value before setting it. It is recommended not to use the same variable for storing the changes. As per my experimentation, the v-time-picker defaults to the HH:MM format.

<v-text-field v-model="startTime" label="Start time" @change="onTextChange">
</v-text-field>

<v-time-picker v-model="startTimeParsed"></v-time-picker>
... data() {
 return {
    startTime: "",
    startTimeParsed: "",
 }
}
... methods: {
onTextChange() {
      // Perform validation on this value before assignment, regex or similar methods can be used
       this.startTimeParsed = this.startTime
    }
}

Here's a concise example to replicate the issue: https://codepen.io/artikandri/pen/wvNEKNV?editors=101

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the best way to incorporate a clear options icon when choosing an option in a MaterialUI select component?

I am looking to enhance the user experience by adding a clear options icon that appears when a selection is made from the list of options. <Select InputProps={{ startAdornment: ( <InputAdornment position='end'> <Cl ...

Call getElementById upon the successful completion of an AJAX request

In the process of constructing a mini quiz, I am utilizing a variable quizScore to store the score. Each question in the quiz is displayed using AJAX. An individual AJAX call captures the ID of the button pressed (for example, on question 2, the button ID ...

Using javascript to quickly change the background to a transparent color

I am in the process of designing a header for my website and I would like to make the background transparent automatically when the page loads using JavaScript. So far, I have attempted several methods but none seem to be working as desired. The CSS styles ...

Ways to incorporate a loading feature in javascript, jquery, and php as it runs?

I have created a form that, when clicked on, returns a value within the page. Below is my form. When the form is submitted, it takes some time to process. I would like to display a loading message while the code is being executed. Here is my form: <ht ...

Authorization based on user roles in Node.js or Express.js

Are there any modules available for implementing role-based authorization in node.js or Express js? For example, having roles such as Super Admin, Admin, Editor, and User? ...

In Internet Explorer 9, the cursor unexpectedly moves up above the element

Within my MVC3 application, I have implemented a feature to change the cursor when hovering over an element. Below is the JavaScript code that accomplishes this: $('#print').hover(function () { var cursorUrl = 'url(@Url.Content("~/Cont ...

Storing data retrieved from an asynchronous call in AngularJS to a variable

Here is the code where I am attempting to utilize promise to store data from an asynchronous call in a variable, but it's not functioning as expected. I am relatively new to promises and after some research, I learned that promises can be helpful in s ...

Tips on recycling JavaScript files for a node.js API

I'm currently using a collection of JS files for a node.js server-side API. Here are the files: CommonHandler.js Lib1.js Lib2.js Lib3.js Now, I want to reuse these JS files within an ASP.NET application. What's the best way to bundle these f ...

Session-based Authorization

I'm completely new to working with express.js, and I've been facing an issue while trying to create a session-cookie after logging in. Even though I can initiate the session and successfully log in, the session data doesn't carry over to the ...

Having trouble executing a fetch request in Next.js

I am struggling to perform a fetch request using getStaticProps in Next.js. Despite following the documentation provided on their website, I am unable to console log the props successfully. My background is mainly in React, so I tried to adapt my approac ...

Exploring the Vue 3 Composition API: Enhancing data flow by creating reactivity

Within my component, there is a basic select menu containing two options ("all" and "Investment"). The goal is to retrieve an array of data from a composable and display each row on the screen. Choosing "all" will show all rows, while selecting "Investment ...

Generate unique IDP SAML replies

Currently, I am working on creating unit test cases for validating SAML responses. To achieve this, I am seeking guidance on generating multiple SAML responses in XML format using the necessary certificates and private keys. Are there any Node.js librari ...

Dynamic way to fetch computed properties in VueJS

I am trying to find a way to calculate the sum of computed properties that begin with the string calculateSum. The challenge is that I cannot access their names using this.computed. Here is my approach: getSubTotal(){ var computed_names = []; var ...

What is the best way to determine which watchers are triggered in Vue.js?

Within my parent component, there are numerous nested child components. Whenever a click occurs on one of the child components, it triggers an update to the route. The parent component watches the route property and performs certain actions when it change ...

"Exploring the Presentation Component Feature in Vue.js Version

I'm looking to streamline the display of all my forms and info pages by utilizing a floating sidebox. I want to avoid duplicating the floating sidebox HTML code in multiple places, so I'm interested in creating a component that can serve as a con ...

Vue js throws a maximum call stack error when updating a Chart component

I have successfully created a line chart using the Chart.js 3.5 library. The chart is responsive, all animations are working fine too. I am currently facing an issue where I am attempting to update the data from a parent component and trigger a chart updat ...

Can you provide some insight into why the init() method is throwing an error?

My project utilizes DynamoDB access through https://www.npmjs.com/package/react-native-dynamodb. I followed the code provided on the website for implementation. The issue I'm facing is that when hovering over my .init() method in WebStorm IDE, it sho ...

Manipulate sibling elements using jQuery's addClass and remove methods

I have implemented a function that adds the class active to elements when they reach the top of the browser, ensuring that the next element will scroll in over the top. While this works smoothly in Chrome, I am encountering some jumping behavior when testi ...

Trouble arises when adding a .js script to the webpage

I'm feeling quite puzzled by this small piece of code, as it appears to be the simplest thing you'll come across today. Despite that, I can't help but seek guidance because I've been staring at it for what feels like an eternity and can ...

Storing Data with expressjs/session in NodeJS

My development project involves 3 files: app.js, index.js (routes), and Users.js (controller). Upon successful user login (verification between POST data and the database), I aim to store information in a session using expressjs/session. Below is how I c ...