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!

javascriptvue.jsdatatablevuetify.js

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

Tips for correctly implementing CORS (Cross-Origin Resource Sharing)

Is there a way to securely access a resource from a third-party domain using XML HTTP Requests (XHR, AJAX)? I have set up CORS on both the target and origin sides with the following configuration: Access-Control-Allow-Origin: http://www.example.com, http ...

javascriptajaxxmlhttprequestcorsaccess-control

The Ajax data was not displayed in the console log, instead an error message was returned stating "http://localhost/IFICSV3/public/sla/sla/getbranch/180 not found"

I am attempting to make a dropdown option dependent on another using ajax. I want to view the data in the console to see if it is successful or not. I expect the data to be displayed in the console log, but instead, an error is being given. http://local ...

javascriptphpajaxlaravel

Creating a Node API that can patiently listen for external data

My current project involves building a server that fetches data from an external API and returns it to the endpoint localhost:3000/v1/api/. However, I'm facing a challenge where the data retrieval process takes approximately 2 seconds, leading to empt ...

javascriptjsonnode.jsexpresspromise

Combining TypeScript and JavaScript for efficient mixins

I came across an article on MDN discussing the usage and creation of mix-ins (link). Intrigued, I decided to try implementing it in TypeScript: type Constructor = new (...args: any) => any; function nameMixin(Base: Constructor) { return class extends ...

javascripttypescriptdynamicsubclassmixins

Sails.js seems to be malfunctioning, as it does not seem to be recognizing the term 'sails'

It seems like I'm encountering an issue with the 'sails' command not being recognized on my Windows 10 system. Despite following all the installation steps, including globally installing Sails.js through npm and ensuring Node is installed, I ...

javascriptnode.jsnpmpackagesails.js

What is the solution for incorporating multiple elements in knockout's applyBindingsToNode function?

I am currently using knockout applyBindingsToNode to dynamically add and remove elements in order to update my html. I need to cut the binding, which is why I am utilizing applyBindingsToNode. In an example I have provided, if you click on the button "Reb ...

javascriptjqueryhtmlknockout.js

After successfully building with Vite, an error occurs stating "TypeError: can't convert undefined to object." However, during development with Vite, everything functions flawlessly

Currently, I am utilizing Vite in conjunction with React and Typescript for my project. Interestingly, when I execute 'vite dev', the live version of the website works flawlessly without any errors showing up on the console. However, things take ...

javascriptreactjstypescriptmaterial-uivite

Error: Unable to access the 'nom_gr' property of null - encountered in Chrome

<ion-col col-9 class="sildes"> <ion-slides slidesPerView="{{nbPerPage}}" spaceBetween="5"> <ion-slide *ngFor="let slide of lesClassrooms; let i = index" (click)="saveCurrentSlide(i)"> ...

javascripthtmlangularionic2

Attempting to retrieve data from cloud Firestore utilizing keyvalue in Angular

My database stores user information under the 'users' collection. I can access this data using the following code: In my service: users$ = this.afs.collection<Users[]>('users').valueChanges(); In my component: public users = t ...

javascriptangularfirebasegoogle-cloud-firestore

Stringification will not work on the virtual object that has been populated

Here is the object passed to the view: app.get('/view_add_requests', isLoggedIn, function (req, res) { var my_id = req.user._id; // this is the senders id & id of logged in user FriendReq.find({to_id: my_id}).populate('prof ...

javascriptjsonnode.jsexpressejs

Bundling sub-components using Rollup for NodeJS application packaging

My ES6 library consists of several sub-modules arranged like this: - package.json - lib - my_package - file1.js - file2.js - sub_module1 - file3.js - file4.js Currently, I import modules within my package using file resolution r ...

javascriptnode.jsrollupjs

What is the response of Express when it encounters numerous identical asynchronous requests from the same origin?

Currently, I am utilizing Express.js for my project. There is an async function that performs a task that can take anywhere from 20 to 30 seconds to complete. Once the task is done, it increases a user's counter in the database. However, users are req ...

javascriptexpressasynchronous

Cease the ongoing Ajax request and switch to a new Ajax call immediately

Within this code snippet, I am capturing user input for typing and then searching it in a database. However, with each character entered by the user, a new AJAX request is triggered without canceling the previous one. My objective is to have the search fu ...

javascriptjqueryajax

Tips for utilizing the loadDataWithBaseURL() method to load CSS and JS files directly from an SDCARD

I am facing an issue with loading files from SDCARD onto a webview. The .html, .js, .css files are stored on the SDCARD in my scenario, and the html file content is encrypted. The steps I follow to load the html file are: Read file content Decrypt all co ...

javascriptandroidandroid-webviewandroid-sdcard

Why would one utilize window.location?.search?.split?

Could someone explain the purpose of using window.location?.search?.split('=')[1] and why the value of id is set to window.location?.search?.split('=')[1]? Code: function EndScreen() { const [score, setScore] = React.useContext(Score ...

javascriptreactjs

The window.onload function is ineffective when implemented on a mail client

Within my original webpage, there is a script that I have created: <script> var marcoemail="aaaaaa"; function pippo(){ document.getElementById("marcoemailid").innerHTML=marcoemail; } window.onload = pippo; </script> The issue a ...

javascriptjqueryhtmlemail

New Relic identifies mysterious delays caused by MongoDB's findOne method

After setting up newrelic to pinpoint the bottlenecks in my app, I discovered a major issue that has left me stumped. The source of most delays seems to be mongoDB user.findOne, but the biggest challenge is locating where in the code this delay is occurri ...

javascriptnode.jsmongodbexpressnewrelic

Problem with ng-include in ng-view templates

Directory Layout: --app --partials --navbar.html --submit --submission.html index.html Using ng-include in submission.html: <ng-include src="'app/partials/navbar.html'" ></ng-include> However, the navbar does not displa ...

javascriptangularjsangularjs-ng-include

Validating IDs by comparing them with one another. If the IDs do not match, an error message will be displayed. If they do match, the corresponding data will

Contents: Overview of the code's functionality. CODE Achievements. Bugs Expected vs. Actual Output Attempts to troubleshoot the errors 1. Overview of the Code's Functionality This system functions as a clock in and out mechanism utilizing an R ...

javascriptphpjqueryajax

Tips for organizing checkboxes in rows horizontally

My question is related to this issue I am trying to arrange my checkboxes in 4 columns horizontally <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> ...

javascripthtmlcssbootstrap-5