I am using v-calendar to have the start date&time and end date&time using mode as dateTime. My requirement is to make the end date&time not go before the start date&time. For this, I am using :min-date prop bounded with start date&time value as shown in the below code.
<v-date-picker :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>
Now let's say the start date&time selected is Feb 10th, 05:00 AM and while selecting the end date&time, the dates before the 10th will be disabled. But If I select 10th as the date(same date), I could still select 04:00 AM as the time, which is not proper.
So is there a way of disabling the time with respect to the selected date?
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>