Once a date has been selected, is there a way to stop the date being deselected if the same date is clicked again? I thought by setting the date in the day clicked event it would stop the deselection, but it doesn't - is there a way to do so?
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>Turns out there is an :is-required attribute you can set to true if you don't want the date to be cleared:
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>