Блог

Главная - Вопросы по программированию - timepicker: как изменить время с помощью клавиатуры

timepicker: как изменить время с помощью клавиатуры

#javascript #vue.js #timepicker

#javascript #vue.js #timepicker

Вопрос:

я использую boostrap timepicker: https://bootstrap-vue.org/docs/components/form-timepicker#form-timepicker

Я ввел этот код:

             <b-form-timepicker
              v-model="timeSlot.timeStart"
              minutes-step="15"
              @input="getCurrentTime(timeSlot)"
            ></b-form-timepicker>

Я не могу найти метод, который мог бы заставить меня изменить время с помощью клавиатуры ПК

Комментарии:

1. вы хотите ввести время, не используя эту стрелку вверх / вниз?

2. правильно, я хотел бы записать время с помощью цифр на клавиатуре

Ответ №1:

Вы можете использовать button-only mode и добавить ввод, в котором вы вводите время :

     <b-input-group class="mb-3">
      <b-form-input
        id="example-input"
        v-model="timeSlot.timeStart"
        type="text"
        placeholder="HH:mm:ss"
      ></b-form-input>
      <b-input-group-append>
        <b-form-timepicker
          v-model="timeSlot.timeStart"
          button-only
          right
          show-seconds
          locale="en"
          aria-controls="example-input"
        ></b-form-timepicker>
      </b-input-group-append">
    </b-input-group>

Ответ №2:

В документации говорится следующее:

всегда возвращает строку в формате ‘HH: mm: ss’, который является тем же форматом, возвращаемым собственными элементами управления браузера. Значение будет находиться в диапазоне от ’00:00:00′ до ’23:59:59′ (24- часовые часы с использованием синтаксиса часового цикла ‘h23’). Если время не выбрано, то возвращается пустая строка («).

https://bootstrap-vue.org/docs/components/form-timepicker#form-timepicker

Итак, вам нужно реализовать что-то, что редактирует значение только с timeslot.timeStart помощью клавиатуры. Для простого примера вы могли бы добавить еще одно простое input поле, а также указать его timeslot.timeStart как v-model.

 <input type="text" v-model="timeslot.timeStart" />

Вы должны увидеть свои b-form-timepicker изменения, если вы измените значение в поле input -и наоборот. После того, как вы это поняли, должно быть легко реализовать некоторые базовые обработчики событий, которые изменяют ваше timeSlot.timeStart время b-form-timepicker , находясь в фокусе, на основе вашего ввода с клавиатуры.

Вы можете найти пример для этого в документации: https://bootstrap-vue.org/docs/components/form-timepicker#button-only-mode

Метки: