Как установить ограничение по времени в Vue-timepicker?

#vuejs2 #timepicker #vuejs-datepicker

#vuejs2 #timepicker #vuejs-datepicker

Вопрос:

Я являюсь vue-timepicker в своем проекте, и ниже приведен код для компонента. Я хочу ограничить время с 9:00 утра до 17:00 вечера по тихоокеанскому времени? Возможно ли такое использование в компоненте vue-timepicker? Если да, пожалуйста, помогите мне это сделать.

 <vue-timepicker class="nopad full-width" format="hh:mm A" v-model="guest.time" v-validate="'required'" data-vv-name="time" :minute-interval="30"></vue-timepicker>
  

Ответ №1:

Пожалуйста, обновитесь vue2-timepicker до последней версии. Мы добавили hour-range поддержку начиная с версии0.2.0, которая полностью удовлетворяет вашим потребностям.

В вашем случае вы можете установить hour-range значение:

 <vue-timepicker class="nopad full-width"
    format="hh:mm A"
    :hour-range="[['9a', '5p']]"
    v-model="guest.time"
    v-validate="'required'"
    data-vv-name="time"
    :minute-interval="30"></vue-timepicker>
  

Пожалуйста, обратите внимание, что :hour-range="[['9a', '5p']]" это сокращение :hour-range="['9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p']" .

Вы можете проверить демонстрационную страницу и документацию для получения более подробной информации.

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

1. Спасибо за ответ. Но поскольку об этом спрашивали давно, я нашел и заменил его. Хотя большое спасибо.

2. NP 🙂 Извините, что не смог увидеть ваш вопрос ранее! @MurtazaBharmal