How do I capture when the date changes using vcalendar?

Question

I have the following in my code...

<template>
    <DatePicker v-model="selectedDate" @input="dateChanged">
        <template v-slot="{ inputValue, inputEvents }">
          <input
              :value="inputValue"
              v-on="inputEvents"
          />
        </template>
    </DatePicker>
    <h2>{{selectedDate}}</h2>
    <h2>{{date}}</h2>
</template>
<script>
import { DatePicker } from "v-calendar";

export default {
  components: { DatePicker },
  data() {
    return {
      selectedDate: Date.now(),
    };
  },
  mounted() {
    this.selectedDate = this.date;
  },
  props: {
    date: {
      type: Number,
      default: Date.now(),
    }
  },
  methods: {
    dateChanged() {
      console.log(`The date changed to`);
    },
  },
};
</script>

The problem is that dateChanged never gets called. I also tried @changed="dateChanged" but either way I don't see the log message in the browser. How do I get the change event when a new date is picked?

score 0 · Answer 1 · answered Jul 23 '21 at 12:47

In the <template> block you need to have exactly one child. You have the <datepicker> and the <h2> 2 times (3 children).

If you put the datepicker and the h2 in a div, it should work:

<template>
  <div id="app">
    <DatePicker v-model="selectedDate" @input="dateChanged">
      <template v-slot="{ inputValue, inputEvents }">
        <input :value="inputValue" v-on="inputEvents" />
      </template>
    </DatePicker>
    <h2>{{ selectedDate }}</h2>
    <h2>{{ date }}</h2>
  </div>
</template>
<script>
import { DatePicker } from "v-calendar";

export default {
  components: { DatePicker },
  data() {
    return {
      selectedDate: Date.now(),
    };
  },
  mounted() {
    this.selectedDate = this.date;
  },
  props: {
    date: {
      type: Number,
      default: Date.now(),
    },
  },
  methods: {
    dateChanged() {
      console.log(`The date changed to ` + this.selectedDate);
    },
  },
};
</script>

You can see it in action here: https://codesandbox.io/s/hopeful-kapitsa-cozei?file=/src/App.vue

I will try again but this didnt work the first time I tried. I will confirm though — Jackie, Jul 24 '21 at 23:42
Sorry I ended up needing to use the watch can you maybe try to debug why that was the case? The @input wouldn't work for me. I could probably listen for the update:modelValue event instead of watch but this isn't working — Jackie, Jul 30 '21 at 14:56

score -1 · Answer 2 · answered Jul 23 '21 at 16:33

We have another way to trigger the changes, you can use watch on selectedDate to get the last value. You can check codesandbox.

<template>
  <DatePicker v-model="selectedDate">
    <template v-slot="{ inputValue, inputEvents }">
      <input :value="inputValue" v-on="inputEvents" />
    </template>
  </DatePicker>
  <h2>{{ selectedDate }}</h2>
  <h2>{{ date }}</h2>
</template>
<script>
import { DatePicker } from "v-calendar";

export default {
  components: { DatePicker },
  data() {
    return {
      selectedDate: Date.now(),
    };
  },
  mounted() {
    this.selectedDate = this.date;
  },
  props: {
    date: {
      type: Number,
      default: Date.now(),
    },
  },
  watch: {
    selectedDate: function () {
      console.log(`The selectedDate changed to`, this.selectedDate);
      // do what you want here
    },
  },
};
</script>

How do I capture when the date changes using vcalendar?

2 Answers2