Una vez que se ha seleccionado una fecha, ¿hay alguna forma de evitar que se anule la selección de la fecha si se vuelve a hacer clic en la misma fecha? Pensé que al establecer la fecha en el día en que se hizo clic en el evento, se detendría la deselección, pero no es así. ¿Hay alguna forma de hacerlo?
new Vue({ el: "#app", data() { return { date: new Date(), masks: { input: 'DD/MM/YYYY', }, }; }, methods: { dayClicked(day) { this.date = new Date(day.id); }, }, }); @import url 'https://unpkg.com/v-calendar@2.3.4/lib/v-calendar.min.css'; <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/v-calendar@2.3.4/lib/v-calendar.umd.min.js"></script> <div id='app'> <v-date-picker v-model="date" color="orange" :masks="masks" :disabled-dates="{ weekdays: [1, 7] }" @dayclick="dayClicked"> <template #default="{ inputValue, togglePopover }"> <label class="form__label date-selector__label" @click="togglePopover"> <span class="form__label-text date-selector__label-text">Date</span> <span class="date-selector__label-value">{{ inputValue }}</span> </label> </template> </v-date-picker> </div>Resulta que hay un atributo :is-required que puede establecer en verdadero si no desea que se borre la fecha:
new Vue({ el: "#app", data() { return { date: new Date(), masks: { input: 'DD/MM/YYYY', }, }; }, methods: { dayClicked(day) { this.date = new Date(day.id); }, }, }); @import url 'https://unpkg.com/v-calendar@2.3.4/lib/v-calendar.min.css'; <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/v-calendar@2.3.4/lib/v-calendar.umd.min.js"></script> <div id='app'> <v-date-picker v-model="date" color="orange" :masks="masks" :disabled-dates="{ weekdays: [1, 7] }" :is-required="true" @dayclick="dayClicked"> <template #default="{ inputValue, togglePopover }"> <label class="form__label date-selector__label" @click="togglePopover"> <span class="form__label-text date-selector__label-text">Date</span> <span class="date-selector__label-value">{{ inputValue }}</span> </label> </template> </v-date-picker> </div>