VueJS Datepicker: how to dynamically disable dates?

Question

I'm implementing the vue-hotel-datepicker library into my project and I wish to dynamically add dates to the disabledDates property after making an ajax call, but my implementation does not seem to work. When I debug using the Vue devtools, I can clearly see that the disabledDates array contains my correct dates, it just does not render them as 'disabled'. It works when I hardcode those dates.

Template:

<datepicker
     :disabledDates="disabledDates" 
     :firstDayOfWeek="1"                
    >
</datepicker>

JS:

data() {
   return {
      disabledDates: this.fetchBookedDates() //contains correct data, see screenshot below
    }
},
methods: {
    fetchBookedDates() {
       window.fetch(Routing.generate('bookings'))
         .then(response => response.json())
         .then(data => this.disabledDates = data['period'])
         .catch((error) => console.log(error));
      }
}

Debugging steps: The Vue devtools shows the disabledDates from my fetch call immediately upon page load, but all dates are still enabled on my datepicker:

Hardcoded (works):

When I hardcode a couple of dates, it does display my dates as 'disabled':

data() {
   return {
     disabledDates: ['2019-02-03', '2019-02-04']
    }
}

And I get the same results in the Vue devtools as when I add them dynamically (also on page load):

What is wrong about my implementation and how should I fix this?

EDIT

The HotelDatePicker component is generated from my library, which contains the disabledDates property that I need to overwrite. This screenshot is the result from dynamically adding the disabledDates via an ajax call as explained above. After my ajax call, both components (Datepicker and HotelDatePicker) have the same disabledDates, containing the same data. But my dates are not rendered as being 'disabled' (only when I hardcode them)

Sounds like that component might not care if disabledDates are dynamic and to re-render them as disabled. Can you to a simple setTimeout function in your component which will update the disabledDates with hardcoded values to confirm this. — thefallen
– thefallen, Commented Jan 3, 2019 at 14:43
@thefallen You are correct. Does this mean there is no way of showing my disabledDates at all? Thank you. — Helenesh
– Helenesh, Commented Jan 3, 2019 at 15:01
You might have to fetch the disabled dates somewhere above, before rendering this component, like passing them from the html or force the component to be destroyed and re-render when you fetch the array with the disabled dates. — thefallen
– thefallen, Commented Jan 3, 2019 at 15:37

Linus Borg · Accepted Answer · 2019-01-03 15:11:00Z

6

I had a quick look at the source - that component doesn't support a dynamic change of that prop.

It parses the content of the prop once, in beforeMount:

https://github.com/krystalcampioni/vue-hotel-datepicker/blob/master/src/components/DatePicker.vue#L529

And doesn't care about subsequent changes.

It could be fixed by adding a watch on that prop to call that parse method again, or turning it into a computed prop instead.

But without such a change it simply doesn't work.

edit: a hack to make it work could look like this:

<datepicker
     :disabledDates="disabledDates" 
     :firstDayOfWeek="1"
     :key="disabledDates.length"               
    >
</datepicker>

Which will force Vue to destroy and re-create the component when the length of the array changes. If yoiu change the array without changing length, it wouldn't work though with this choice of key.

answered Jan 3, 2019 at 15:11

Linus Borg

24.1k7 gold badges65 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

thefallen Over a year ago

Very smart with the key thing.

Helenesh Over a year ago

I have used the same code as in my question, but added your key thing. The result is Error in render: "TypeError: _vm.disabledDates is undefined

Linus Borg Over a year ago

Well you have to have the disabledDates property initialized as an empty array in `data, much like @thefallen demonstrated in his reply, which is also correct in its own way - your original code didn't propertly initialize things.

MANSOOR KOCHY Aug 4 at 17:40

using the :key prop is working

thefallen · Accepted Answer · 2019-01-03 14:24:03Z

1

Since you are fethching them you don't need to add a property :disabledDates="disabledDates" on your tag. For the request you can use the mounted hook to send the request when the component is mounted and then to update the disabled dates when data is received:

data() {
  return {
    disabledDates: []
  }
},
mounted() {
  this.fetchBookedDates();
},
methods: {
  fetchBookedDates() {
    const that = this;

    window.fetch(Routing.generate('bookings'))
      .then(response => response.json())
      .then(data => that.disabledDates = data['period'])
      .catch((error) => console.log(error));
  }
}

answered Jan 3, 2019 at 14:24

thefallen

9,8202 gold badges39 silver badges51 bronze badges

1 Comment

Helenesh Over a year ago

Unfortunately this does not work either. I have updated my question with more info.

Collectives™ on Stack Overflow

VueJS Datepicker: how to dynamically disable dates?

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related