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!