如何使用带有文本而不是空/数字的 VuetifyJS 时间选择器组件?

Question

我正在使用VueJS和VuetifyJS作为Web应用程序。如何在不12:NaN时间选取器标题的情况下将文本用于时间选取器组件？我需要将SupriseMe作为文本字段中的文本，并将 00：00作为时间选择器标题中的默认值。

下面是该问题的 CodePen 示例：https://codepen.io/anon/pen/OEEeyg?&editors=101

Answer 1

也许将 v-modeltime保持在null(按照 vuetify 的建议(并在文本字段中添加一个占位符。

编辑：要更改占位符颜色，您可以通过添加新的类名来覆盖 css：

data () {
return {
time: null,
//...
}
}
<v-text-field
slot="activator"
v-model="time"
label="Picker in dialog"
prepend-icon="access_time"
readonly
placeholder="SurpiseMe"
class="date-select" //for example
></v-text-field>

<style>
.date-select > .input-group__input > ::placeholder {
color: black !important;
}
</style>