我正在使用vuejs v-calender插件,所以我有一个日期范围选择器。一切都很好,我可以选择日期,仅此而已。
我想做的就是注销选定的日期,以便以后可以将它们存储在数据库,更新表单等中,但是我不知道如何实现。我在文档中找不到有关如何执行此操作的示例。
有人知道如何获取所选日期范围的开始和结束日期吗?
这是我到目前为止所拥有的...
<template>
<v-date-picker mode='range' v-model='range' is-inline :columns="$screens({ default: 1, lg: 2 })" />
</template>
<script>
import { DatePicker } from 'v-calendar'
export default {
name: 'Booking',
components: {
DatePicker
},
data() {
return {
range: {
start: new Date(),
end: null
}
}
},
mounted() {
this.$root.$on('input', (value) => {
console.log('dxggdfg');
});
}
}
</script>
添加更改事件
<v-date-picker mode='range' v-model='range' @change="onDateRangeChange" is-inline :columns="$screens({ default: 1, lg: 2 })" />
{
...
methods: {
onDateRangeChange() {
console.log(this.range)
}
},
mounted() {
this.$root.$on('input', (value) => {
console.log('dxggdfg');
});
}
}
或者您可以使用watch
{
...
watch: {
range: {
handler: function () {
console.log(this.range)
},
deep: true
}
},
mounted() {
this.$root.$on('input', (value) => {
console.log('dxggdfg');
});
}
}