如何捕捉事件是 vue.js v-calendar

Question

我正在使用 vuejs v-calender 插件，所以我有一个日期范围选择器。一切都很好，我可以 select 约会，但仅此而已。

我想做的只是注销 selected 日期，以便稍后我可以将它们存储在数据库中、更新表单等，但我不知道如何实现这一点。我在文档中找不到有关如何执行此操作的任何示例。

有谁知道如何获取 selected 日期范围的开始日期和结束日期？

这是我目前所知道的...

<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>

Answer 1

添加输入事件

 <v-date-picker mode='range' v-model='range' @input="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，如果您还从外部更新您的 v-model，则效果很好：

{
   ...
   watch: {
     range: {
        handler: function () {
            console.log(this.range)
        },
        deep: true
     }
   },
   mounted() {
      this.$root.$on('input', (value) => {
        console.log('dxggdfg');
      });
    }
}

Answer 2

对我来说，它适用于 @input

例如：

<date-picker mode='range' v-model='range' is-range class="m-auto" @input="changeDate"/>

然后，在方法中，我只有一个名为“changeDate”的方法。一旦在日期范围内选择了第二个日期，就会调用此方法。

Answer 3

computed: {
 dateRange: {
      set (val) {
         // action after date change here
      },
      get () {
        let range = {
          start: new Date(moment().subtract(7, 'day').format('YYYY-MM-DD')), 
          end: new Date(moment().format('YYYY-MM-DD'))
        }
        // action after receives date from props
        return range
      }
    }
}

 <v-date-picker 
        :columns="$screens({ default: 1, lg: 2 })" 
        is-range 
        :value="dateRange"
        :attributes="attrs"
        :max-date='new Date()'
        v-model="dateRange"
      />

你可以通过计算得到结果，我在 data() 上浪费了很多时间，但它对我不起作用

Answer 4

偶然发现了这个 - 希望对其他人有所帮助。当只使用单个日期时，您可以这样设置。

<v-date-picker
    is-expanded
    :columns="$screens({ default: 1, lg: 2 })"
    :attributes="calendar.attributes"
    v-model="calendar.today"
    @dayclick="changeDate"
/>


...


 methods: {
    changeDate() {
      console.log('changeDate called');
      // emit your own event or ??
    },
}
...

如何捕捉事件是 vue.js v-calendar

How to catch events is vue.js v-calendar

javascript

vue.js

datepicker

vcalendar