CODEWITHSUNDEEP
vue.jsvuetify.js
SARogersz
SARogersz

Reputation: 131

Vuetify Date Picker - How to Set the initial date on dialog usage

I have tried using picker-date prop, and looked at the others, but I can't yet figure out how to have <v-date-picker> show with the year, month and day of my own choosing. Has anyone done this and know how to manage it? The component where the picker is used is a child component, and the date I'd like to initialize with comes in as a prop.

Upvotes: 1

Views: 12927

Answers (2)

Twody
Twody

Reputation: 1

I usually initialize the date picker with the current date minus the timezone offset like so:

<div id="app">
  <v-app id="blabla">
    <v-row justify="center">
      <v-date-picker v-model="datePicker"></v-date-picker>
    </v-row>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      datePicker: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
    }
  },
})

Upvotes: 0

Manoj
Manoj

Reputation: 841

I tried with picker:'2020-06-04' initial value in v-data-picker and its showing this chosen value. Are you looking for something similar?

https://codepen.io/manojkmishra/pen/oNbYPvv?editors=1010

<div id="app">
<v-app id="inspire">
{{picker}}
<v-row justify="center">
  <v-date-picker v-model="picker"></v-date-picker>
</v-row>
</v-app>
</div>

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
  picker:'2020-06-04',
  //picker: new Date().toISOString().substr(0, 10),
 }
 },
 })

Upvotes: 4

Related Questions