我正在尝试在以下Vuetify日历上启用输入的事件：
我已设置日历以接受以表单提交的输入数据，包括名称，详细信息，开始，结束，颜色。当我提交表单时，发生错误，提示
在所有事件上，开始和结束属性都必须是有效的时间戳，格式为YYYY-MM-DD。
我在开始和结束输入字段中使用type =“ date”，它将日期显示在MM-DD-YYYY中。我尝试改用Vuetify日期选择器，以使字段以YYYY-MM-DD格式呈现，但无济于事。如何重新配置此日历以改为接受MM-DD-YYYY格式的日期？
日历已修改：
增加了功能
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})
},
完整代码
<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>
答案 0 :(得分：2)
不需要 moment.js ，该代码仅用于两行代码，因此您可以像这样简单地进行操作：
addEvent () {
this.start = new Date(this.start).toISOString().substring(0,10);
this.end = new Date(this.end).toISOString().substring(0,10);
...
this.events.push({name: this.name,
details: this.details,
start: this.start,
end: this.end,
color: this.color})
答案 1 :(得分：1)
我建议您将日期格式设置为MM-DD-YYYY，而不要修改vuetify，然后将其转换为提交表单时所需的任何格式。
Moment.js是用于此类转换的出色库，并且具有简单的API。
就您而言，您可以简单地this.end = moment(this.end).format('MM-DD-YYYY');
答案 2 :(得分：0)
作为Vuetify日历的开发人员，这是我的两分钱。事件采用字符串的原因是要区分全天事件和定时事件。全天事件的格式为YYYY-MM-DD，定时事件的日期格式为YYYY-MM-DD HH：mm：ss（其中秒是可选的，数字不需要零填充。 ）
话虽如此，当此PR合并并发布时，您将能够传递日期或UTC时间戳：
https://github.com/vuetifyjs/vuetify/pull/11198
然后您可以在事件上定义将其标记为定时事件的函数或属性。