Vuetify.js Datepicker - 提供允许日期的数组？答案

【问题标题】：Vuetify.js Datepicker - Provide array of allowed dates?Vuetify.js Datepicker - 提供允许日期的数组？
【发布时间】：2018-11-02 11:06:33
【问题描述】：

https://vuetifyjs.com/en/components/date-pickers#example-date-allowed-dates

我一直在研究这个并试图弄清楚如何格式化语法以向元素提供日期数组以供日期选择。

  methods: {
    allowedDates: val => parseInt(val.split('-')[2], 10) % 2 === 0
  }

https://codepen.io/anon/pen/yjrQjj?editors=101

我可以看到该方法正在检查每个日期值的真假，并显示该方法返回可被两天整除的日期。很简单。

您将如何提供一组日期来检查并返回匹配项？

【问题讨论】：

您是否尝试过将allowedDates 属性绑定/设置为数组而不是函数？从文档来看，这听起来可行。
@PatrickSteele Afaics 文档说allowed-dates - Type: Function，所以传递数组不应该工作。
@Traxo 我正在查看问题中链接的文档页面：“您可以使用数组、对象和函数指定允许的日期。”。也许这意味着您可以编写一个函数来检查数组... :)
@PatrickSteele 哦，你是对的。这是误导。 API 有正确的信息。

标签： javascript vue.js vuetify.js

【解决方案1】：

您首先必须声明日期数组：

var el = ["2018-03-03", "2018-03-05"]

然后检查日期是否在数组中：

allowedDates: val => el.indexOf(val) !== -1

此处示例：https://codepen.io/anon/pen/yjrGNG?editors=101

【讨论】：

这是完美的。谢谢，我知道它比我想象的要简单，虽然我不知道我是否忽略了它，但我不知道数组必须是 YYYY-MM-DD，使用 / 作为分隔符，并且它没有按预期工作。
该文档具有误导性，因为它说：“您可以使用数组、对象和函数指定允许的日期。”但是只能指定使用函数，如果传递数组或对象，则会报错

【解决方案2】：

如果您想禁用过去的日期，您可以执行以下操作

---------在模板区------------

<v-date-picker
     v-model="date"
     :allowed-dates="disablePastDates"
></v-date-picker>

---------在脚本区------------

methods: {
    disablePastDates(val) {
       return val >= new Date().toISOString().substr(0, 10)
    },
}

【讨论】：

【解决方案3】：

并通过处于状态的数组进行过滤：（使用 v1.5，我尚未在较新版本上进行测试）

methods: {
   getAllowedDates (val) {
        if (this.allowedDates.indexOf(val) !== -1) {
          return true
        } else {
          return false
        }
      },
}

日期选择器：

 <v-date-picker 
    scrollable
    :allowed-dates="getAllowedDates"
    ></v-date-picker>

【讨论】：

【解决方案4】：

codepen

这样它对我来说非常有效！

arrayDates: []

methods: {
   allowedDates(val) {
      for (var i = 0; i < this.arrayDates.length; i++) {
         if (this.arrayDates[i] == val){
            return val
         } 
      }
   }
}

【讨论】：

【解决方案5】：

提供给该函数的val 参数是格式为YYYY-MM-DD 的日期，这就是为什么他们使用该函数通过连字符（-）字符分割然后占据第三位在那个数组中，只得到偶数。

您应该能够使用提供给该函数调用的val 参数来返回一个布尔值，该值表示您是否希望该日期是可选的。

【讨论】：

感谢您的解释，在这和约翰的回答之间，现在更有意义了。