如何使用带有文本而不是 null/number 的 VuetifyJS 时间选择器组件？

Question

我正在使用 VueJS 和 VuetifyJS for a web app. How to use a text for the time picker component，但在时间选择器 header 中没有得到 12:NaN？我需要将 SupriseMe 作为文本字段中的文本，并将 00:00 作为时间选择器 header 中的默认值。

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

Answer 1

也许将 v-model time 保持在 null（根据 vuetify 的建议）并在文本字段中添加一个占位符。

编辑：要更改占位符颜色，您可以通过添加新的 class 名称来覆盖 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>

如何使用带有文本而不是 null/number 的 VuetifyJS 时间选择器组件？

How to use the VuetifyJS time picker component with a text instead of a null/number?

javascript

vue.js

vue-component

vuejs2

vuetify.js