Comment changer le format de date du calendrier Vuetify
J'essaie d'activer les événements entrés sur le calendrier Vuetify suivant:
J'ai configuré mon calendrier pour accepter les données saisies soumises dans un formulaire, y compris le nom, les détails, le début, la fin, la couleur. Lorsque je soumets le formulaire, une erreur se produit en disant que
les propriétés de début et de fin sont requises sur tous les événements pour être un horodatage valide au format AAAA-MM-JJ.
J'utilise type = "date" dans les champs de saisie de début et de fin, qui affichent les dates dans MM-JJ-AAAA. J'ai essayé d'utiliser le sélecteur de date Vuetify à la place afin d'obtenir les champs à rendre au format AAAA-MM-JJ, mais en vain. Comment puis-je reconfigurer ce calendrier pour accepter à la place le format MM-JJ-AAAA pour les dates?
CALENDRIER MODIFIÉ:
moment ajouté à la fonction
async addEvent () {
this.start = await new Date(this.start).toISOString().substring(0,10)
this.end = await new Date(this.end).toISOString().substring(0,10)
this.events.Push({name: this.name})
this.events.Push({details: this.details})
this.events.Push({start: this.start})
this.events.Push({end: this.end})
this.events.Push({color: this.color})
},
Code complet
<template>
<v-row class="fill-height">
<v-col>
<v-sheet height="64">
<v-toolbar flat color="white">
<v-btn outlined class="mr-4" @click="setToday">
Today
</v-btn>
<v-btn fab text small @click="prev">
<v-icon small>mdi-chevron-left</v-icon>
</v-btn>
<v-btn fab text small @click="next">
<v-icon small>mdi-chevron-right</v-icon>
</v-btn>
<v-btn
color="primary"
dark
@click.stop="dialog = true"
>
New Event
</v-btn>
<v-toolbar-title>{{ title }}</v-toolbar-title>
<div class="flex-grow-1"></div>
</v-toolbar>
</v-sheet>
<v-dialog v-model="dialog" max-width="500">
<v-card>
<v-container>
<v-form @submit.prevent="addEvent">
<v-text-field v-model="name" type="text" label="name"></v-text-field>
<v-text-field v-model="details" type="text" label="detail"></v-text-field>
<v-text-field v-model="start" type="date" label="start"></v-text-field>
<v-text-field v-model="end" type="date" label="end"></v-text-field>
<v-text-field v-model="color" label="color"></v-text-field>
<v-btn type="submit" color="success" class="mr-4" @click.stop="dialog = false">
submit
</v-btn>
</v-form>
</v-container>
</v-card>
</v-dialog>
<v-sheet height="600">
<v-calendar
ref="calendar"
v-model="focus"
color="primary"
:events="events"
:event-color="getEventColor"
:event-margin-bottom="3"
:now="today"
:type="type"
@click:event="showEvent"
@click:more="viewDay"
@click:date="viewDay"
@change="updateRange"
></v-calendar>
<v-menu
v-model="selectedOpen"
:close-on-content-click="false"
:activator="selectedElement"
full-width
offset-x
>
<v-card
color="grey lighten-4"
min-width="350px"
flat
>
<v-toolbar
:color="selectedEvent.color"
dark
>
<v-btn icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-toolbar-title v-html="selectedEvent.name"></v-toolbar-title>
<div class="flex-grow-1"></div>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
<v-card-text>
<span v-html="selectedEvent.details"></span>
</v-card-text>
<v-card-actions>
<v-btn
text
color="secondary"
@click="selectedOpen = false"
>
Cancel
</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</v-sheet>
</v-col>
</v-row>
</template>
<script>
//import moment from 'moment'
export default {
data: () => ({
today: '2019-01-08',
focus: '2019-01-08',
type: 'month',
typeToLabel: {
month: 'Month',
week: 'Week',
day: 'Day',
'4day': '4 Days',
},
name: null,
details: null,
start: null,
end: null,
color: null,
selectedEvent: {},
selectedElement: null,
selectedOpen: false,
events: [
{
name: 'Vacation',
details: 'Going to the beach!',
start: '2018-12-29',
end: '2019-01-01',
color: 'blue',
}
],
dialog: false,
}),
computed: {
title () {
const { start, end } = this
if (!start || !end) {
return ''
}
const startMonth = this.monthFormatter(start)
const endMonth = this.monthFormatter(end)
const suffixMonth = startMonth === endMonth ? '' : endMonth
const startYear = start.year
const endYear = end.year
const suffixYear = startYear === endYear ? '' : endYear
const startDay = start.day + this.nth(start.day)
const endDay = end.day + this.nth(end.day)
switch (this.type) {
case 'month':
return `${startMonth} ${startYear}`
case 'week':
case '4day':
return `${startMonth} ${startDay} ${startYear} - ${suffixMonth} ${endDay} ${suffixYear}`
case 'day':
return `${startMonth} ${startDay} ${startYear}`
}
return ''
},
monthFormatter () {
return this.$refs.calendar.getFormatter({
timeZone: 'UTC', month: 'long',
})
},
},
methods: {
viewDay ({ date }) {
this.focus = date
this.type = 'day'
},
getEventColor (event) {
return event.color
},
setToday () {
this.focus = this.today
},
prev () {
this.$refs.calendar.prev()
},
next () {
this.$refs.calendar.next()
},
async addEvent () {
this.start = await new Date(this.start).toISOString().substring(0,10)
this.end = await new Date(this.end).toISOString().substring(0,10)
console.log(this.start)
this.events.Push({name: this.name})
this.events.Push({details: this.details})
this.events.Push({start: this.start})
this.events.Push({end: this.end})
this.events.Push({color: this.color})
},
showEvent ({ nativeEvent, event }) {
const open = () => {
this.selectedEvent = event
this.selectedElement = nativeEvent.target
setTimeout(() => this.selectedOpen = true, 10)
}
if (this.selectedOpen) {
this.selectedOpen = false
setTimeout(open, 10)
} else {
open()
}
nativeEvent.stopPropagation()
},
updateRange ({ start, end }) {
// You could load events from an outside source (like database) now that we have the start and end dates on the calendar
this.start = start
this.end = end
},
nth (d) {
return d > 3 && d < 21
? 'th'
: ['th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th'][d % 10]
},
},
}
</script>
Je vous conseille de formater votre date en MM-DD-YYYY Au lieu de modifier vuetify, puis de la convertir dans le format dont vous avez besoin lorsque vous soumettez le formulaire.
Moment.js est une bibliothèque géniale pour ce type de conversions et dispose d'une API simple.
Dans votre cas, vous pouvez simplement faire this.end = moment(this.end).format('MM-DD-YYYY');