Блог

У меня есть этот метод toAllowedDates, который позволяет datepicker выбирать только диапазон дат с интервалом всего в 1 день. Я пытался решить эту проблему почти полдня, но безуспешно. Это поможет, если я смогу получить какие-либо мнения. Возможно, мой способ сделать это изначально неверен.

 methods: {
  toAllowedDates(val) {
    // I need the index here but if I pass the index in the loop it will not pass the value
    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) amp;amp; !currentDate.isAfter(maxAllowedDate)
    }
  }
  

по умолчанию это передаст значения val (day1 ~ day30)

 <template v-for="(schedule, index) in schedules">
  <sw-calendar-range 
   :value="[schedule.workdayDateFrom, schedule.workdayDateTo]"
   :to-allowed-dates="toAllowedDates"
   @input="updateWorkdaySchedule(['workdayDateFrom', 'workdayDateTo'], index, $event)">
  </sw-calendar-range>
</template>
  

что я пытался передать индекс методу toAllowedDates, но безуспешно

 <template v-for="(schedule, index) in schedules">
  <sw-calendar-range 
   :value="[schedule.workdayDateFrom, schedule.workdayDateTo]"
   :to-allowed-dates="toAllowedDates(val, index)"
   @input="updateWorkdaySchedule(['workdayDateFrom', 'workdayDateTo'], index, $event)">
  </sw-calendar-range>
</template>
  

В итоге я создал функцию для каждой разрешенной даты. Я надеюсь, что это поможет кому-нибудь в будущем.

в моих данных я создал пустой массив для своих методов

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

в моих методах

 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) amp;amp; !currentDate.isAfter(maxAllowedDate)
      })
    }
  

Попробуйте это

prop:

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

Методы:

 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) amp;amp; !currentDate.isAfter(maxAllowedDate)
}