Issue with disabled dates not refreshing in the view after adding them via button click

Question

Issue with disabled dates not refreshing in the view after adding them via button click

I have been utilizing the vue-hotel-date-picker plugin and it's been functioning well. The problem arises when I use the disabled dates props; it disables the dates initially when initializing and updating on the calendar. However, when I update the disabled dates array on any button click event, it updates the array but does not reflect or render in the view component. I have attempted to debug it using the Vue.js Chrome extension.

Here is an image from the debugging process https://i.sstatic.net/zgIu0.png

Plugin link

Below is my HTML Code

<div class="box">
    <h3>Check in only on Saturday and minimum stay of 10 days</h3>
    <DatePicker
      DatePickerID="01"
      :disabledDates = "disabledDates"
      :enableCheckout="true"
      :minNights="10"
      :useDummyInputs="false"
       placeholder="StartDate ► EndDate"
      />
  </div>
  <button @click="onChangeDisableDates()" > Change Disable Dates </button>

JS

<script>
import DatePicker from 'components/HotelDatePicker.vue';

export default {
    components: {
        DatePicker
    },

    data () {
      return {
         disabledDates : ['2017-08-18']
      }
    },
    methods : {
      onChangeDisableDates () {
         this.disabledDates.push("2017-08-19");
      }
    }
};

</script>

I am uncertain how to identify and resolve this issue; it could potentially be a problem with the plugin itself. Any assistance would be greatly appreciated!

javascript datetime vue.js vuejs2 vue-component

Answer 1

Answer №1

Utilize the computed property: { } to ensure automatic updates whenever changes occur.

import DatePicker from 'components/HotelDatePicker.vue';

export default {
  components: {
    DatePicker
  },
  data() {
    newDisabledDates: null
  }
  computed: {
    disabledDates() {
      // Add code for disabling dates or retrieve from another variable
      if (this.newDisabledDates === null) {
        // Default implementation
        return {
          disabledDates: ['2017-08-18']
        }
      } else {
        // Updated newDisabledDates after button click
        return {
          disabledDates: this.newDisabledDates
        }
      }
    }
  },
  methods: {
    onChangeDisableDates() {
      this.newDisabledDates.push("2017-08-19");
    }
  }
};

Answer 2

Utilize the computed property: { } to ensure automatic updates whenever changes occur.

import DatePicker from 'components/HotelDatePicker.vue';

export default {
  components: {
    DatePicker
  },
  data() {
    newDisabledDates: null
  }
  computed: {
    disabledDates() {
      // Add code for disabling dates or retrieve from another variable
      if (this.newDisabledDates === null) {
        // Default implementation
        return {
          disabledDates: ['2017-08-18']
        }
      } else {
        // Updated newDisabledDates after button click
        return {
          disabledDates: this.newDisabledDates
        }
      }
    }
  },
  methods: {
    onChangeDisableDates() {
      this.newDisabledDates.push("2017-08-19");
    }
  }
};

Answer 3

Answer №2

function checkDisabledDates(date) {
   var day = date.getDate(); 
   var month = date.getMonth(); 
   var year = date.getFullYear();
   
   for(var i = 0; i < this.disabled.length; i++) {
      var disabledDate = this.disabled[i].split("-");
      
      if(day == parseInt(disabledDate[2]) && month == parseInt(disabledDate[1]) && year == parseInt(disabledDate[0])) { 
          return true;
      } else {
          return false;
      }
   }
}

Answer 4

function checkDisabledDates(date) {
   var day = date.getDate(); 
   var month = date.getMonth(); 
   var year = date.getFullYear();
   
   for(var i = 0; i < this.disabled.length; i++) {
      var disabledDate = this.disabled[i].split("-");
      
      if(day == parseInt(disabledDate[2]) && month == parseInt(disabledDate[1]) && year == parseInt(disabledDate[0])) { 
          return true;
      } else {
          return false;
      }
   }
}

Issue with disabled dates not refreshing in the view after adding them via button click

Answer №1

Answer №2

Similar questions

What's preventing the mobx @computed value from being used?

Attempting to increase a variable by 1, only to find that it appears to be doubling on its own

Using Ruby on Rails to incorporate AJAX for posting and commenting functionality

Vue 3 has a known issue where scoped styles do not get applied correctly within the content of a <slot> element

The callback function is not being executed in the Ajax request

Challenges with HTML and JavaScript

Listen for a click event on an Unordered List using addEventListener

Utilizing Three.js to showcase large 3D images from a JSON file

Map on leaflet with popup next to key

Discover the power of JQuery Mobile for implementing swipe functionality exclusively

Restrict HTML Content in Json Result using PHP and Jquery

Getting just the outer edges of intricate BufferGeometry in Three.js

Attempting to create a login and registration form

Executing a Function Following the Completion of getAuth() in React Firebase

Chronological Overview (Highcharts)

including a collection of values into a JSON data structure

Exploring the Power of JQuery with Hover Effects and SlideToggle

"The Node.js program is unable to access the contents of the browser.js file when loaded in

Struggling to integrate Parse-server with vue.js

Using Javascript to create session-specific cookies