Disabled dates not updating when new dates are added.

[iiRobin]

Description

People need to select dates when a room is occupied. When these dates are added, I want to make them disabled in the picker so they don't get selected again. But the disabled dates don't seem to update once I add dates to the array.

Code sample

Hotel Date Picker

<HotelDatePicker
    :startDate="today"
    :endDate="new Date(new Date().getFullYear() + 1, 11, 31)"
    format="DD-MM-YYYY"
    ref="datePicker"
    :i18n="NL"
    :showYear="true"
    :disabledDates="disabledDates"
       @check-in-changed="handleCheckIn($event)"
       @check-out-changed="handleCheckOut($event)">
</HotelDatePicker>

I add dates to be disabled to the array like this:

setDisabledDates() {
    // Set empty array.
    this.disabledDates = []

    // Loop through all the dates.
    this.dates.forEach((date) => {
        let checkin = date.checkin.split("-")
        let checkout = date.checkout.split("-")

        // Get all dates between the checkin and checkout date.
        let itr = moment.twix(new Date(checkin[2] +"-"+ checkin[1] +"-"+ checkin[0]), new Date(checkout[2] +"-"+ checkout[1] +"-"+ checkout[0])).iterate("days")

        // Iterate through the dates.
        while(itr.hasNext()) {
            // Add each date to an array to be disabled.
            this.disabledDates.push(itr.next().format("YYYY-MM-DD"))
        }
    })
}

The setDisabledDates() function is triggered by a watcher.

Expected behavior: The newly added dates in the array to be disabled in the datepicker.

Actual behavior: They get disabled once I open and close it again, but not immediately when they get added to the array.

Datepicker Version

vue-hotel-datepicker@2.7.8

[matiasperrone]

Check the last v4 version

[iiRobin]

Check the last v4 version

Checked it, updated my component to V4.0.0-RC1 and all the styling of the date picker is gone... Got any idea how to fix this?

[matiasperrone]

Checkout the readme file on how to use it. You have to include the css/scss file as external file so you can change it if you need to.

[iiRobin]

I've added the css file in the code and got the datepicker working. Now I'm doing the exact same as before but the dates in the picker are still not being disabled when I push new data in the array. On a fresh page reload the dates are disabled but when I push them directly into the array it's not updating reactively. Also I came across this:

I get this when I hover over a date that is already disabled.

[matiasperrone]

ok I'll reopen the case thanks for the feedback

[matiasperrone]

I see the problem now, you cannot use an arrow function to update an external variable. "this" in that context it is not what you expect, please use a regular anonymous function instead. Best!

[iiRobin]

I see the problem now, you cannot use an arrow function to update an external variable. "this" in that context it is not what you expect, please use a regular anonymous function instead. Best!

No, this is not true. I can see in the Vue-inspector that the newly selected dates are in the attributes array so that shouldn't be a problem. I just did what you said tho and now I'm getting another 2 errors

This errors occurs when no dates are in the disabledDates array yet and I click on one of the dates to select it:

Another error occurs when 1 or more dates are in the disabledDates array and I hover over 1 of the dates that should be disabled:

[matiasperrone]

Those variables minimumRequiredPeriod and halfDayCheckOut are part of the i18n prop, the tooltip attribute. Check the Readme file:

i18n Defaults:

i18n: {
  "night": "Night",
  "nights": "Nights",
  "week": "week",
  "weeks": "weeks",
  "day-names": ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
  "check-in": "Check-in",
  "check-out": "Check-out",
  "month-names": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
  ],
  "tooltip": {
      "halfDayCheckIn": "Available CheckIn",
      "halfDayCheckOut": "Available CheckOut",
      "saturdayToSaturday": "Only Saturday to Saturday",
      "sundayToSunday": "Only Sunday to Sunday",
      "minimumRequiredPeriod": "%{minNightInPeriod} %{night} minimum.",
  },
}

[matiasperrone]

I'll try to update the doc page to enhance the experience. But it seems an error in your programing (at least at this point, with little info). If you may, please provide me with a complete working example, so I may reproduce the error that you are having and solve it. :D

[matiasperrone]

Check this article in Medium regarding the use of Vue on fiddle.net Maybe you can create an example with the problem.

[matiasperrone]

Use this as starting point https://jsfiddle.net/matup/ocavkjmu/

[iiRobin]

Use this as starting point https://jsfiddle.net/matup/ocavkjmu/

I've created a repesentation of what I'm trying to do in my application.

Check out: https://jsfiddle.net/m6e9gv8n/

[matiasperrone]

Ok, I'll check that out and get back to you.

[matiasperrone]

@iiRobin can you try with the last committed code instead of the released code? I think you will find the solution made in the PR #266 integrated. I need that someone test the solution 😄.

🙏 please let me know if you can.

[iiRobin]

I got the code from the commit working on my project since I can see the new code in the node_modules folder. But it still doesn't seem to work for me.

[matiasperrone]

If it is in the node_modules it is from a released version and this is in dev (main) version so is not in npm package yet. You must clone or download the code from here and then try it in a different environment (with npm run serve) and modifying the App.vue file probably.

[iiRobin]

If it is in the node_modules it is from a released version and this is in dev (main) version so is not in npm package yet. You must clone or download the code from here and then try it in a different environment (with npm run serve) and modifying the App.vue file probably.

I downloaded the code and made a custom tab in your sandbox area with my code in it. The solution in the PR seems to be working!

[matiasperrone]

@iiRobin this is now is resolved in v4.2, this new version has this fix and a CHANGELOG.md file