[Vuejs]-Vuetify.js Datepicker set allowed dates for each datepicker in array

by

0👍

I ended up making a function for each allowed-dates. I hope this helps someone in the future.

in my data I created an empty array for my methods

data: () => ({
    ...
    newMethods: []
  }),

in my methods

setAllowedDatesTo(idx) {
      this.$set(this.allowedDates, 'To' + idx, val => {
        const today = this.$moment(this.formWorks.workdaySchedules[idx].workdayDateFrom, "YYYY-MM-DD")
        const maxAllowedDate = today.clone().add(1, "days")
        const currentDate = this.$moment(val)
        return !today.isAfter(currentDate) && !currentDate.isAfter(maxAllowedDate)
      })
    }

0👍

Try this

prop:

    :to-allowed-dates="(val) => toAllowedDates(val, index)"

Methods:

toAllowedDates(val, index) {
    const today = this.$moment(this.schedules[index].dayFrom, "YYYY-MM-DD")
    const maxAllowedDate = today.clone().add(1, "days")
    const currentDate = this.$moment(val)
    return !today.isAfter(currentDate) && !currentDate.isAfter(maxAllowedDate)
}

Leave a comment