Search code examples
vue.jsvuejs2datepickervuetify.jscustomization

How can I allowed only mondays in date-picker, vue


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>

Solution

  • 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',
        }
    },
    

    https://codeply.com/p/mnpcdLBYgA