v-calendar 问题，如何根据对象数组列表中的日期禁用日期

问题描述

我刚开始编写代码，现在我们在 airbnb 项目中使用 v-calendar.io，我们需要根据后端列表中不可用的日期数组列表禁用日期。

<v-date-picker
  class="date-picker"
  v-model="date"
  :disabled-dates="[new Date(2021,9,10)]"
  color="blue"
  is-range
/>

因此，将日期放入 :disabled-dates 是可行的，但是我该怎么做才能使其基于数组列表而不是硬编码的预设日期起作用？（我已经学会了如何从后端获取数据，但我不知道如何编码，所以 :disabled-dates 会获取这些信息）

解决方法

将日期数组放入 Vue 组件数据中：

data: () => ({
   disabledDays: [] // later populated from API call
})

然后你可以这样做：

<v-date-picker
  class="date-picker"
  v-model="date"
  :disabled-dates="disabledDays" /*not hardcoded*/
  color="blue"
  is-range
/>

从后端收到日期字符串后，您可以将它们转换为日期对象，例如：

this.disabledDays = response.disabledDates.map(string => new Date(string))`

我想出了一个片段来向您展示更简单的事情。我在 setTimeout 中放了一个 mounted 来模拟来自服务器的请求，1 秒后，响应将来自服务器并用日期对象填充 disable_dates。

我使用最简单的方式将字符串映射到日期对象，您也可以使用 map 或普通的 for 来实现此目标。

new Vue({
  el: '#app',data: {
    date: null,disable_dates: [],},mounted() {
    setTimeout(() => {
      let string_dates_from_srver = ['2021-05-05','2021-05-08']
      string_dates_from_srver.forEach((item) => {
        this.disable_dates.push(new Date(item))
      })
    },1000)
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<link href="https://unpkg.com/[email protected]/lib/v-calendar.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/lib/v-calendar.umd.min.js"></script>
<div id='app'>

  <v-date-picker class="date-picker" v-model="date" :disabled-dates="disable_dates" color="blue" is-range></v-date-picker>

  {{date}}
</div>

javascript vcalendar vue.js