CODEWITHSUNDEEP
vue.jsdatepickervuetify.js
woshitom
woshitom

Reputation: 5131

vuetify date-picker set default month

I'm using the Date Picker element with a v-model being an array of dates: ['2022-04-10', '2022-04-11'] .

Even though my dates are in April 2022, I would like to set the default month to May (I would like the Date Picker to display May 2022 by default).

I tried with to play with min="2022-05-01" and max="2022-05-31" but still it displays April 2022 by default.

How can I display May even though my model doesn't have any date in May?

                <v-date-picker
                  min="2022-05-01"
                  max="2022-05-31"
                  v-model="datesTest"
                  :show-adjacent-months="false"
                  :show-current="false"
                  color="red"
                  multiple
                  no-title
                 ></v-date-picker>

Upvotes: 0

Views: 2113

Answers (1)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27202

datesTest should contain the date of May month. Hence, It will be like :

data: () => ({
    datesTest: '2022-05-01',
})

Working Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    datesTest: '2022-05-01',
  })
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-date-picker
                  min="2022-05-01"
                  max="2022-05-31"
                  v-model="datesTest"
                  :show-adjacent-months="false"
                  :show-current="false"
                  color="red"
                  multiple
                  no-title
                 ></v-date-picker>
    </v-row>
  </v-app>
</div>

Upvotes: 1

Related Questions