Estoy usando v-calendar para tener la fecha y hora de inicio y la fecha y hora de finalización usando el modo como dateTime . Mi requisito es hacer que la fecha y hora de finalización no sean anteriores a la fecha y hora de inicio. Para esto, estoy usando :min-date prop delimitado con el valor de fecha y hora de inicio como se muestra en el siguiente código.
<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>Ahora digamos que la fecha y la hora de inicio seleccionadas son el 10 de febrero a las 05:00 a. m. y al seleccionar la fecha y la hora de finalización, las fechas anteriores al 10 se desactivarán. Pero si selecciono el día 10 como la fecha (la misma fecha), aún podría seleccionar las 04:00 a. m. como la hora, lo cual no es correcto.
Entonces, ¿hay alguna forma de deshabilitar el tiempo con respecto a la fecha seleccionada?
Como puedo ver en su documentación , puede pasar validHours prop que es una función que devuelve si una hora es válida.
Entonces, dependiendo de su implementación, puede hacer algo como esto:
<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>