How to disable available times looping through an array using watch?

Ask a question
3

I’m creating a booking application in Vue CLI. I decided to use vue-ctk-date-time-picker for choosing date and time. I’m planning to disable some times, depending on the date, but i’m running to a problem. My code only disables the times of last date specified in array and ignores the rest.

I’ve logged the times array to console depending on the date and it prints correct values. Other than that console displays no errors.

<VueCtkDateTimePicker only-date v-model="date"/>
<VueCtkDateTimePicker only-time :disabled-hours="disabledHours"/>
date: null,
disabledHours: [],
testArray: [
  {
    date: "2019-05-28",
    times: ["10", "11"]
  },
  {
    date: "2019-05-29",
    times: ["10", "11", "12"]
  }
]

watch: {
  date(newVal, oldVal) {
    for (let i = 0; i < this.testArray.length; i++) {
      if (newVal == this.testArray[i].date) {
        for (let j = 0; j < this.testArray[i].times.length; j++) {
          this.disabledHours.push(this.testArray[i].times[j]);
        }
      } else {
        this.defaultHours();
      }
    }
  }
},
created() {
  this.defaultHours();
}

defaultHours() {
  this.disabledHours = ["00","01","02","03"]
}

If date is “2019-05-28”, then i expect disabled hours to be 10 and 11. If date is “2019-05-29”, then i expect disabled hours to be 10, 11 and 12 etc.

But what happen is, that it takes the last date specified in the array and only disables its hours.

offer bounty
add comment

0 Answer

Your Answer