`Incorporating event handling in Vue.js using v-calendar requirements`

I am utilizing the v-calendar plugin in my Vuejs project to incorporate a daterange picker. The rendering is working as expected and I can select dates successfully. However, I am struggling with logging out the selected dates for future use such as storing them in a database or updating a form. Unfortunately, the documentation does not provide any examples on how to achieve this.

Can anyone guide me on how to retrieve the start and end dates of a selected date range?

Below is a snippet of what I have implemented 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>

Answer №1

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

Another option is to utilize watch, which is effective when the v-model is also updated externally:

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

Answer №2

Personally, I found success using @input

Here's an example:

<calendar mode='extended' v-model='selectedDates' is-extended class="centered" @input="updateCalendar"/>

Then, within the functions, there is a function named "updateCalendar". This function will be triggered once both dates have been selected in the extended calendar.

Answer №3

Just came across this helpful snippet for setting up single dates.

<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');
      // add your custom functionality here
    },
}
...

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

You can utilize computed properties to achieve the desired outcome. I experimented with data() initially but found it ineffective for my needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript struggles to obtain the timezone information when Daylight Saving Time is

Can someone help me with setting a user's timezone offset for PHP through ajax? When a page is loaded with session data, if there is no pre-existing data, the following script is inserted into the page: <script type="text/javascript"> $(doc ...

Retrieve the title and display it as a caption using JavaScript

Below is a snippet of code that takes the title from an element with the class a.preview, appends it to another element with the ID p#preview, and generates some AJAX content on hover. While the title is printing elsewhere, the variable c in this script ...

Utilizing JavaScript AJAX to upload a dynamically generated PDF file to a specific directory on the server

Looking for a solution to save a complex table generated via JavaScript as a PDF on the server. Existing pdf generation libraries have limitations with style and fonts, making it difficult for 'complex' tables. The table can currently be download ...

Discover instances of a string within an array using JQuery

I am currently exploring how to locate occurrences of a specific string within an array on the client side. The examples provided on the JQuery Docs all seem focused on number comparisons, which isn't quite what I need. Essentially, I'm attempti ...

Initialize jQuery functions on newly generated element

My website has elements arranged like this: <ul> <li> <div class="tag_name">Tag Name</div> <div class="delete">X</div> </li> <li> <!-- and so forth... --> </l ...

Sharing parameters between functions in JavaScript

I have a working code but I want to modify the function getLocation to accept 2 arguments that will be passed to getDistanceFromLatLonInKm within the ajmo function. Currently, getDistanceFromLatLonInKm has hardcoded arguments and I would like to use variab ...

The function stringByEvaluatingJavaScriptFromString is failing to execute

I have tackled similar problems that have been posted in this forum, however my issue remains unresolved. I am attempting to utilize stringByEvaluatingJavaScriptFromString in swift, but it is not functioning as expected. Any assistance would be greatly app ...

Ways to display an array of objects based on their duplicate values

Struggling with the following example, seeking assistance new Vue({ el:"#app", data: { items: [ { type: "a", Descr: "searching" }, { type: "a", Descr: "maps" ...

Retrieve information stored in a JSON data field within the results of an npm

How can I properly access the value of DepDateTime from the first object? Here is my current attempt: const nodeSkanetrafiken = require('node-skanetrafiken'); const from = { name: 'Bjärred centrum', id: 62025, type: 0 }; const to = ...

Issues with plugins in Rails 4 are causing functionality to not be operating

I recently installed a template and encountered an issue with some of the JavaScript functionality. However, upon checking the compiled list of JavaScript files, I can see that all the files have loaded successfully and the CSS includes all the necessary f ...

Is there a way to modify Bootstrap tabs when they are hovered over?

This may seem like a simple question, but I've been struggling to figure it out. I'm attempting to have the bootstrap tabs switch when the mouse hovers over them. <div class="container"> <nav class="nav nav-tabs" ...

Ways to determine which Card or SelectField is currently being edited

In my project, I have implemented Material UI Cards containing a Select list within each card. const ads = this.props.ads; let adsItems = ads.map((c, i) => <div key={ads[i].adid}> <Card> <CardHeade> &l ...

The Sequelize findOne method fails to return the desired results, resulting in an empty

My findOne function with include is not working as expected. It is not returning any data. I am missing data for Deal, which is related to Redemption [] <- I should have data here. Deal.belongsTo(models.Redemption, { foreignKey: 'redemptionI ...

Steps to successfully retrieve an image using JavaScript on the client side while circumventing any CORS errors

I have a React application where I am displaying an image (an SVG) and I want the user to be able to download it by clicking on a button. The image is stored in Firebase Storage. However, I am encountering an issue with CORS error: Access to fetch at &ap ...

What is the best way to effectively link promise calls that rely on each other?

Here is the code snippet I am currently working with: const request = require('request-promise'); request(validateEmailOptions).then(function(result) { if (result.valid) { request(createUserOptions).then(function (response) { if (re ...

Yii2 and Vue project, subpages display a unique error message when accessed through a 404 redirect

I am currently working on a project that combines yii2 and Vue, and overall it is functioning well. However, I am facing an issue where sub URLs are first redirected to a 404 error page before being properly displayed. Here is an excerpt from my htaccess f ...

What is the best way to create a trimmed edge around an input field?

I'm looking to design an input element that has a border which changes when the input is focused. Here's how I want the inputs to behave: Input without focus When the user focuses on the input or fills it out, I want the label to move up and t ...

Tips for displaying the contents of a URL within a div element

Is there a way to load a new page into a <div></div> without opening a separate tab? I tried using an iframe, but that method is not recommended and it includes scroll bars. <div id="iframeLogin"><a href="first.php" target="_self"> ...

Response from the Facebook API regarding group information

I have integrated JavaScript SDK codes from the developers at Facebook. I am looking to retrieve my user's groups. <script> FB.api( "/me/groups", function (response) { if (response && !response.error) ...

Can a snapshot be taken of an auto-generated ID document in FireStore?

Currently, I am working on developing both a mobile app and web app for my Final Year Project. As someone relatively new to Firestore, I am using a single instance of it to store data. When a customer registers through the mobile app, their information ge ...