How to catch events is vue.js v-calendar

user_87154 0
Viewed 11454

I am using the vuejs v-calender plugin so I have a daterange picker. It all renders fine and I can select dates but that is is it.

What I want to do is just log out the selected dates so later I can store them in database, update form etc but I don't know how to achieve this. I can't find any examples in the documentation of how to do this.

Does anyone know how to get the start and end dates of a selected date range?

Here is what I have so far...

<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>
vue.js vcalendar datepicker javascript
4 Answers

Add input event

 <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');
      });
    }
}

Alternatively you can use watch, which works well if you also update your v-model externally:

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

For me, it worked with @input

For example:

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

Then, in the methods, I just have a method called "changeDate". This will be called once the second date has been selected in the date range.

user_63901520

Stumbled across this - hopefully will help someone else. When using just single dates, you can set things up like this.

<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 ??
    },
}
...
user_33572700 

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

You can achieve the result with computed, I waste a lot of time with data() but it didn't work for me

user_111519920
Related