Search code examples
vuejs2timepickervuejs-datepicker

How to set time limit in Vue-timepicker?

I am vue-timepicker in my project and below is the code for a component. I want to limit the time from 9:00 AM to 5:00 PM PST? Is that usingpossible in vue-timepicker component? If yes, Please help me to do it.

<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>
Solution

  • Please upgrade vue2-timepicker to the latest version. We added an hour-range support since v.0.2.0 which completely fulfills your needs.

    In your case, you can set the hour-range to:

    <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>

    Please note that the :hour-range="[['9a', '5p']]" is a shortcut of :hour-range="['9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p']".

    You can check the Demo page and Documentation for more details.