Usando vuejs vcalendar range , quiero limitar la cantidad de días que el usuario puede seleccionar. ¿Sabes que hay algún tipo de opción "maxDays"? También intenté crear un método en el que cuando el rango es mayor que una cierta cantidad de días, la fecha de finalización se modifica para ajustarse al rango máximo. El problema aquí que encontré fue que el calendario no se estaba actualizando, incluso si el objeto de fecha sí lo estaba.
Así que digamos que tengo en mi plantilla el siguiente calendario:
<v-date-picker v-model="range" is-range />
Donde "rango" es:
data() { return { range: { start: new Date(), end: new Date(), }, }; }Tengo un método que verifica si el rango es válido. Y si no es válido (es decir, cuando es demasiado grande), se modifica la fecha de finalización:
if (!this.validRange) { let startDate = this.range.start; let endDate = new Date(); endDate.setDate(startDate.getDate() + 6); this.$set(this.range, "end", endDate); }Y como dije, el valor range.end cambia correctamente, pero el calendario aún muestra el mismo rango sin actualizar el valor range.end.
¿Hay alguna manera de arreglar esto? Y sé que otras bibliotecas pueden hacer ese tipo de cosas, solo quiero saber si es posible con v-calendar. ¡Muchas gracias por tu ayuda!
julián
Aquí hay un violín: https://jsfiddle.net/Lhd9eov4/
HTML:
<div id='app'> <v-date-picker v-model="range" is-range @input="handleInput()" /> </div>JS:
new Vue({ el: '#app', data() { return { range: { start: new Date(), end: new Date().setDate(new Date().getDate() + 1), } }}, methods:{ handleInput(){ this.$nextTick(() => { this.range = { start: this.range.start, end: new Date().setDate(this.range.start.getDate() + 6), }; }); } } })El rango parece reactivo cuando creas un nuevo objeto. Escuchar el evento de entrada y luego actualizar el rango (en otro ciclo de actualización de DOM) parece hacer el trabajo.