让用户在 v-text-field 中以 hh:mm:ss 输入时间答案

【问题标题】：Let user enter time in hh:mm:ss in v-text-field让用户在 v-text-field 中以 hh:mm:ss 输入时间
【发布时间】：2025-12-15 13:45:01
【问题描述】：

image 我正在做一个 Vue js 项目，它允许用户输入他们在 HH:MM:SS （在图像中）中执行任务所用的时间，我将发送到后端。但我的问题是我不知道如何让 vuetfy 文本字段接受这种格式的输入。我应该使用 vuetify 文本字段，而不是普通的 html 输入。

<v-text-field
   filled
   rounded
   dense
   class="rounded-0"
   name="projectTime"
   placeholder="HH:MM:SS"
   v-model="entryEditForm.projectTime"
></v-text-field>

【问题讨论】：

你能和你的代码一起分享更多细节吗？
我已经添加了代码。但是，我不知道应用于 v-text-field 以获取格式的道具。我将类型设置为时间，但它不起作用，因为它是项目时间，所以它可能类似于 85:33:32 或 00:50:00，具体取决于用于执行任务的时间。但是，在发送到后端时，我应该转换整个时间段并以秒为单位发送（而不是小时、分钟和秒）。

标签： javascript vue.js vuetify.js

【解决方案1】：

你可以为 Vuetify.js 使用 DatetimePicker 组件

安装

npm install --save vuetify-datetime-picker

从'vue'导入Vue
从 'vuetify-datetime-picker'
导入 DatetimePicker 导入'vuetify-datetime-picker/src/stylus/main.styl'

Vue.use(DatetimePicker)

用法

<v-datetime-picker
        label="Select Datetime"
        v-model="datetime">
</v-datetime-picker>

date time properties

more information on codespots

【讨论】：

我试过了，但它不允许我输入超过 24 小时的时间。因此用户无法输入需要 3 天 37 分钟（即 72:37:00）才能完成的任务