How can I allow the user to type in v-time-picker?

Question

I need the user to be able to type digits in the vuetify v-time-picker component, without losing the functionality of selecting 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 tried to make an @input so I could enter digits into the field, but still couldn't achieve that functionality, thanks.

Answer 1

Use a combination of v-model and @change on v-text-field, then feed the result to the v-time-picker. Do not forget to parse/sanitize the value before assigning, so it's better not to use the same variable to save the changes. From what I tried, the v-time-picker uses HH:MM format by default.

<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() {
      // validate this value before assigning, you can use regex and so on
       this.startTimeParsed = this.startTime
    }
}

Minimal reproducible example: https://codepen.io/artikandri/pen/wvNEKNV?editors=101