How to catch events is vue.js v-calendar

Question

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>

score 6 · Accepted Answer · edited Jun 27 '21 at 14:44

6

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

edited Jun 27 '21 at 14:44

Kalnode

9,386
3
34
62

answered May 07 '20 at 10:21

Józef Podlecki

10,453
5
24
50

1

Thanks @jozef. The watch suggestion worked as the other one didn't. I did try using watch before but never got it to work – AdRock May 07 '20 at 14:38
`@input` is convenient but only triggers from within `v-calendar` (as expected). Use the `watch` method if you also update the `v-model` externally, e.g. having buttons to choose preset date ranges (separate from v-calendar) like a button "Next 3 Days". – Kalnode Jun 27 '21 at 14:42
Side question: is `this.$root.$on(...` even needed? @input should just call the func directly; no extra listener needed. – Kalnode Jun 27 '21 at 14:45

score 4 · Answer 2 · answered Nov 04 '20 at 21:28

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.

score 1 · Answer 3 · answered Dec 17 '21 at 20:34

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

score -1 · Answer 4 · answered Aug 01 '21 at 07:59

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

How to catch events is vue.js v-calendar

4 Answers4