What is the best way to limit the number of days that can be selected in v-calendar range for vue.js?

I am exploring the use of vuejs vcalendar range, and I am looking for a way to restrict the number of days that a user can select. Is there an option like "maxDays" available in vcalendar? I attempted to create a method where if the selected date range exceeds a certain number of days, the end date is automatically adjusted to fit within the maximum range. However, I encountered an issue where although the date object was updated, the calendar UI did not reflect the change.

For example, suppose I have the following template code:

<v-date-picker v-model="range" is-range />

And the data property "range" defined as:

data() {
    return {
      range: {
        start: new Date(),
        end: new Date(),
      },
    };
  }

I have implemented a method to validate the selected range and modify the end date if necessary:

if (!this.validRange) {
        let startDate = this.range.start;
        let endDate = new Date();
        endDate.setDate(startDate.getDate() + 6);
        this.$set(this.range, "end", endDate);
      }

Although the value of range.end updates correctly, the calendar display does not reflect this change. How can I resolve this issue? While I understand that other libraries may offer similar functionality, I specifically want to know if it is achievable with v-calendar. Thank you for your assistance!

Julien

Answer №1

Check out this demo: https://jsfiddle.net/Lhd9eov4/

Here is the HTML code:

<div id='app'>
  <v-date-picker
          v-model="range"
          is-range
          @input="handleInput()"
        />
</div>

And here is the JavaScript code:

new Vue({
  el: '#app',
  data() {
    return {
      range: {
        start: new Date(),
        end: new Date().setDate(new Date().getDate() + 1),
      }
  }},
  
  methods:{
        handleInput(){
        this.$nextTick(() => {
        this.range = {
          start: this.range.start,
          end: new Date().setDate(this.range.start.getDate() + 6),
          };
        });
      }
    }
})

By listening to the input event and updating the range in a separate DOM update cycle, the range becomes reactive when creating a new object.

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

A guide to setting up Firebase(FCM) Push Notifications on nuxtjs / vuejs

Despite extensive hours scouring the internet for a user-friendly method to incorporate Firebase FCM Push Notification into my nuxt project, I came up empty-handed. ...

Sending a JavaScript array to a Ruby on Rails controller by utilizing a hidden form field

Having explored numerous solutions that did not fit or resolve my issue, I am turning to this platform with my question: I utilize JavaScript to populate hidden fields in a form with data and transmit it to a Ruby on Rails controller. While this process w ...

Discover innovative ways to define reactive attributes within Vue.js

I am working on a parent component that passes a config object as props to its child component. My goal is to make certain entries in this config object reactive, such as: created() { this.config.page = this.config.page || 1 } Once I do this, any c ...

What is the best way to call an Angular component function from a global function, ensuring compatibility with IE11?

Currently, I am facing a challenge while integrating the Mastercard payment gateway api into an Angular-based application. The api requires a callback for success and error handling, which is passed through the data-error and data-success attributes of the ...

Learn how to utilize the getElementByClassName method in JavaScript to insert checkboxes into two lists that share the same class name

I have a situation where I have two lists sharing the same class name. I need to dynamically create checkboxes in both of these lists based on XML data. My current dilemma lies in how to properly utilize getElementByClassName in JavaScript to add checkbox ...

Version 2: "In case of an empty input field, the submit button should be

After experimenting with two different codes on my websites, I encountered an issue. The first code looked like this: $(document).ready(function(){ $('.sendButton').attr('disabled', true); $('#message').keyup(function ...

Utilizing AngularJS and ADAL.JS to Define Resource ID (Audience)

Is there a way to utilize adal.js within AngularJS to obtain a bearer token for the audience https://management.azure.com through JavaScript? I have created a client application in Azure AD and configured its permissions to allow access to the "Windows Az ...

Is it possible to hide Form elements and remove their values simultaneously?

I have implemented a script to display an additional language menu, which functions perfectly. However, I encountered an issue where if the user selects a language and then decides to remove it by clicking on "Remove", the field is hidden but the value sti ...

Having trouble downloading a PDF file on a local server with React and the anchor tag element

Having trouble downloading a pdf file from my react app to my Desktop. I've reached out for help with the details How to download pdf file with React. Received an answer, but still struggling to implement it. If anyone new could provide insight, that ...

currently in operation - anticipating response from ajax

within this specific function: function VerifyUserInput() { var result = true; if ($("#txtName").val().trim().length == 0) { result = false; $('#txtName').effect("highlight", {}, 1000); } if ($("#txtSurname").val() ...

Struggling to render images within a child component in a React application when passed as a prop from the parent component

Currently immersed in a React project, here is the structured layout of my work: public index.html src App.js images facebook.png image.PNG linkedin.png profile.png twitter.png Profile Intro profileIntro.js data data.js Within App.js, I import ...

Maintain the aspect ratio of the image while specifying the height in Next.js

Is there a way to set the height of an image in Next.js to 500px while maintaining its aspect ratio? I've been searching for a solution but haven't found one yet. <div className='relative text-center'> <Image ...

A guide to reordering table rows by drag-and-drop with JavaScript

Seeking assistance with swapping table rows using JQuery UI. Although successful in the swap, struggling to retrieve row numbers during the drag and drop event. Understanding the row number is essential for subsequent tasks. Any help would be greatly appre ...

HTML Navigator encountering Javascript Anomaly

Here is the code snippet I'm working with: driver = new HtmlUnitDriver(); ((HtmlUnitDriver) driver).setJavascriptEnabled(true); baseUrl = "http://www.url.com/"; driver.get(baseUrl + "/"); ... However, whenever I ...

Issues with debugging Vue.js in VS Code are causing complications

Currently, I am working on a Vue.js web application (Vue 2) in Visual Studio Code and utilizing the chrome debugger extension. I had initially set up this configuration several months ago based on recommendations from a Stack Overflow post found here: visu ...

Modifying the content of the front-end HTML file according to the data retrieved from express-session

I've been working on creating a login page for my web application using express-session. So far, I've successfully implemented the functionality to validate login credentials. After confirming a valid login, I execute the following code within t ...

Configuring headless unit testing with requirejs

Seeking a JavaScript unit testing environment, I feel like I'm on a quest for the Holy Grail. The criteria are as follows: testing Requirejs AMD modules isolating each module by mocking out dependencies ability to test in-browser during development ...

Eslint for Typescript in Vue is throwing an error with a message "Unexpected token, expecting ','. Make sure to

Whenever I attempted to utilize vue's type assertion, I kept encountering this eslint error. To illustrate, consider the following snippet: data: function () { return { sellerIdToListings: {} as any, // 'as' Unexpected to ...

Retrieve data within an object.map() function, returning after the mapping process has been completed

I am currently working with a cardsList object that is retrieved from a fetch() function. As I iterate over the cardsList and make additional requests to get more information for each card, I have encountered a peculiar issue. Despite the mapping process b ...

The RSS feed reader is currently malfunctioning

I'm having trouble loading an RSS feed from the following URL: http://solutions.astrology.com/scripts/it.dll?cust_id=aamfha&doc=daily07short/dailyshort.xml Here is the code I am using to try to read it: url = 'http://solutions.astrology.co ...