I am using v-calendar as a date picker in my Vue project. My objective is to select complete week - 7 days fixed from sunday to saturday. I have been looking around in the documentation but unable to get my head around it.
This is what I have as an example https://codepen.io/achaphiv/pen/OJXjooB
<div id='app'>
<v-date-picker v-model="value" :available-dates="availableDates" is-inline></v-date-picker>
The current date is: {{ value || 'null' }}
</div>
new Vue({
el: '#app',
data() {
const now = new Date()
const later = new Date(now.getTime() + 5 * 60 * 1000)
return {
value: null,
availableDates: [
{ start: now, end: later }
]
}
}
})
If I understood you correctly try like following snippet:
new Vue({
el: '#app',
data() {
return {
value: null,
availableDates: {
start: new Date(),
end: new Date(new Date().setDate(new Date().getDate() + 7))
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/v-calendar@1.0"></script>
<div id='app'>
<v-date-picker v-model="value" :available-dates="availableDates" is-inline></v-date-picker>
The current date is: {{ value || 'null' }}
</div>