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

Posted 2023-05-07

【中文标题】如何捕捉事件是 vue.js v-calendar

【英文标题】：How to catch events is vue.js v-calendar

【发布时间】：2020-08-22 14:25:00

【问题描述】：

我正在使用 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>

【参考方案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');
      );
    

【讨论】：

谢谢@jozef。手表建议有效，而另一个则没有。我之前确实尝试过使用手表，但从未让它工作

@input 很方便，但只能从v-calendar 内部触发（如预期的那样）。如果您还从外部更新 v-model，请使用 watch 方法，例如具有选择预设日期范围的按钮（与 v 日历分开），例如“未来 3 天”按钮。

附带问题：this.$root.$on(... 甚至需要吗？ @input 应该直接调用函数；不需要额外的监听器。

【参考方案2】：

对我来说，它适用于 @input

例如：

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

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

【参考方案3】：

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

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

...

【参考方案4】：

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() 上浪费了很多时间，但它对我不起作用