[Vuejs]-How to disable the hours before the start date&time using v-calendar?

by

0👍

✅

As I can see in their documentation you can pass validHours prop that is a function that returns if an hour is valid.

So depending on your implementaton you can do something like this:

<v-date-picker :validHours="isHourValid()" :min-date="this.formData.startDate" v-model="formData['endDate']" mode="dateTime" :timezone="timezone" name="End Date" class="dateTimePicker" >
    <template v-slot="{ inputValue, inputEvents }">
        <input
           class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
           :value="inputValue"
           v-on="inputEvents"
        />
    </template>
</v-date-picker>

<script>
  function isHourValid(hourThatIsSelected){
    let startDateVal = 12 // extract hour from formData['startDate'], eg. 12
    return hourThatIsSelected > startDateVal 
  }
</script>

Leave a comment