Im using v-data-picker in my vue project. I want to customize this component and I would like to know how to allowed only mondays to display. Another days should be disabled.
Code:
<template>
<v-row justify="center">
<v-date-picker
v-model="date"
:allowed-dates="allowedDates"
class="mt-4"
min="2016-06-15"
max="2018-03-20"
></v-date-picker>
</v-row>
</template>
<script>
export default {
data: () => ({
date: '2018-03-02',
}),
methods: {
allowedDates: val => parseInt(val.split('-')[2], 10) % 2 === 0,
},
}
</script>
Use the getDay()
function to determine if the date is a Monday...
data() {
return {
allowedDates: val => new Date(val).getDay() === 0,
date: '2018-03-02',
}
},