JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<script src="https://fonts.googleapis.com/css?family=Material+Icons"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">
<div id="app">
<v-app id="inspire">
<v-row justify="center">
<ul v-for="user in users">
<li>{{user.id}}</li>
<li>{{user.name}}</li>
<li>{{user.phone}}</li>
</ul>
<v-date-picker v-model="picker">
</v-date-picker>
</v-row>
</v-app>
</div>
JavaScript
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
users:[{
id:"1",
name:"test_name",
birthday:"21-02-2020",
phone:"2222222222"
}],
picker: null,
},
methods: {
parseDate(date) {
const parsedDate = date.split('-').reverse().join('-')
return parsedDate;
}
},
mounted () {
this.picker = this.parseDate(this.users[0].birthday)
console.log(this.picker)
}
})