Как использовать компонент выбора времени VuetifyJS с текстом вместо нуля / числа? - PullRequest
Новая
       11

Как использовать компонент выбора времени VuetifyJS с текстом вместо нуля / числа?

0 голосов
/ 24 июня 2018

Я использую VueJS и VuetifyJS для веб-приложения. Как использовать текст для компонента выбора времени , не получая 12:NaN в заголовке выбора времени? Мне нужно иметь SupriseMe в качестве текста в текстовом поле и 00: 00 в качестве значения по умолчанию в заголовке выбора времени.

Вот пример кода CodePen: https://codepen.io/anon/pen/OEEeyg?&editors=101

1 Ответ

0 голосов
/ 24 июня 2018

Возможно, сохраните v-модель time на 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>
...