vue+Element 时间选择器 只有后台传回的数据可以点击，其他日期不能被点击

 

写在前面：查了很久没有找到可以根据后台的数据对时间选择器作出限制，只能找到关于连续时间的限制。和我想要的要求不同，所以是自己写的，如果有什么问题可以提出来

v-model，绑定值

type类型，我只要日期，所以类型为date

:editable=false，不能自行输入

value-format="yyyy-MM-dd"，根据你们后台要的写对应的格式

placeholder，占位内容

上面详细内容可以去看element网站

最主要的是:picker-options 当前日期选择器特有的选项

主要是disabledDate 

现在data里面绑定值定义也就是和上面代码的picker-options后面的值一致

  data() {
      return {
        pickerOptions: this.limitDate(),
      }
 }

limitDate() {
        let self = this
        return {
          disabledDate(time) {
            let day = time.getDate()
            if (day < 10){
              day = "0" + day
            }
            let month = time.getMonth() + 1
            if (month < 10) {
              month = "0" + month
            }
            let year = time.getFullYear()
            let res = year + "-" + month + "-" + day
            for (let i = 0; i < self.stopTime.length; i++) {
              let _time = self.stopTime[i]
              if (res == _time){
                return false
              }else {
                continue
              }
            }
            return true
          }
        }

      },

以下为个人想法，有错误请指正

disabledDate(time) 中的time也就是日历每一个值，所以time第一个值就是2020年3月29日，不过这个获取的时间为标准时间，我想要的日期时间格式为例：2020-04-01。

这里的stopTime为数组，是后台传回给我的日期数据。

stopTime=[
    "2019-04-01",
    "2019-04-15",
    "2019-04-29"
  ]

 for (let i = 0; i < self.stopTime.length; i++) {
              let _time = self.stopTime[i]
              if (res == _time){
                return false
              }else {
                continue
              }
            }
            return true

res是我最后想要的日期格式，见上

这里for循环的大概思路是

循环stopTime这个数组，

如果日历上的日期res与stopTime里面所有的数据进行比较，如果相同就返回false，证明这个日期可以被选择

整个循环结束后也没有对应的数据，就返回true，说明这个日期没有数据，所有不能被选择