J'essaie de suivre cette vidéo en utilisant Vue et Vuetify pour appliquer la date actuelle avec v-model
Au composant sélecteur de date v-date-picker
en utilisant la valeur de données date
qui est initialement définie avec new Date()
.
Il s'agit d'une structure simplifiée de mon projet:
[~ # ~] js [~ # ~]
new Vue({
el:"#app",
data: {
date: new Date(),
time: new Date()
}
})
Modèle
<div id="app">
<v-date-picker v-model="date"></v-date-picker>
{{ date }}
<v-time-picker v-model="time"></v-time-picker>
</div>
Et voici un CodePen. Malheureusement, je n'ai pas pu faire fonctionner le CSS Vuetify avec le CodePen, mais si vous ouvrez la console, vous verrez que j'obtiens des erreurs dans le v-date-picker
Lorsque j'essaie d'utiliser new Date()
avec la directive v-model
. Le sélecteur de date ne rend pas non plus. Le v-time-picker
Fonctionne cependant très bien.
Sur ma configuration locale, j'ai créé un projet Vue avec la vue-cli. Voici l'erreur que j'y arrive:
[Vue warn]: Erreur dans le hook créé: "TypeError: dateString.split n'est pas une fonction"
trouvé dans
---> sur src/components/Meetup/CreateMeetup.vue sur src/App.vue
Je fais exactement comme dans le tutoriel que je suis, donc je ne sais pas si c'est un bug avec la dernière version de Vue ou Vuetify? Ou est-ce que je manque quelque chose?
De toute évidence (à partir du message d'erreur que vous obtenez) v-datepicker
s'attend à être lié à un String
. Vous voudrez peut-être essayer
data: {
date: new Date().toJSON(),
time: new Date().toJSON()
}
https://codepen.io/connexo/pen/ypWxLv
Voir également la documentation de l'API Vuetify (qui indique explicitement qu'elle attend v-model
doit être de type String
):
v-model String null Controls the displayed date. Must use ISO 8601 format.
data: {
date: new Date().toISOString().substr(0, 10)
}
Utilisez plutôt l'attribut value afin de surmonter la liaison.
exemple
enter code here
data: {
date: new Date().toISOString().substr(0, 10)
}
<v-text-field slot="activator" :value="dataValue.datePass" label="Date" append-icon="event" readonly style="font-size:14px"></v-text-field>
<v-date-picker v-model="dataValue.datePass"></v-date-picker>
Dans mon cas, j'avais besoin que la date soit stockée en tant qu'objet Date au lieu d'une chaîne. Donc, au lieu d'utiliser v-model dans le sélecteur de date, j'ai géré cela en utilisant @input et: value.
new Vue({
el: '#app',
data() {
return {
isActive: false,
theDate: new Date()
}
},
computed: {
formattedDate() {
return this.theDate ? moment(this.theDate).format('MM/DD/YYYY') : undefined; // Custom format
},
datePickerFormattedDate() {
return this.theDate ? moment(this.theDate).format('YYYY-MM-DD') : undefined; // Date picker objects needs date in this particular format
}
},
methods: {
inputHandler(date) {
if (typeof date === 'string')
date = moment(date).toDate();
this.isActive = false;
this.theDate = date;
}
}
})
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/locale/en-gb.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.12/vuetify.min.js">
</script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-content>
<v-container>
<v-layout row wrap>
<v-flex pb-4 xs12>
Stored date: {{ theDate }}
</v-flex>
<v-flex xs12>
<v-text-field :readonly="true" :value="formattedDate" label="I want to enter dates here"></v-text-field>
<v-menu :close-on-content-click="true" v-model="isActive" :Nudge-right="40" lazy transition="scale-transition" offset-y full-width min-width="290px">
<v-icon slot="activator">event</v-icon>
<v-date-picker :value="datePickerFormattedDate" @input="inputHandler"></v-date-picker>
</v-menu>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer></v-footer>
</v-app>
</div>
</body>
</html>
D'après les exemples officiels, il semble que vous devez utiliser comme ceci
data: {
date: new Date().toISOString().substr(0, 10),
time: new Date().getHours() + ':' + new Date().getMinutes(),
}
Exemple -