vue+iview 日期选择器禁用（数组）

需求：在日期选择器的选择面板上区分有数据的日期与没有数据的日期

全部代码如下：

<template>
  <div class="Box">
    <div class="TimeS">
      <Row>
        <Col span="12">
          <DatePicker
            type="date"
            placeholder="测试用。。。。。"
            style="width: 200px"
            v-model="TestD"
            @on-open-change="TestOpen"
            :options="TestOption"
          ></DatePicker>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      TestList: ["2018-01-07", "2018-01-09", "2018-01-17", "2018-01-27"],//有数据的日期
      TestOption: { disabledDate() {} },//日期选择器禁用
      TestD: ""
    };
  },
  mounted() {
    this.TestD = this.TestList[0];
  },
  methods: {
    TestOpen(data) {
      // this.TestAxios() 接口
      if (data) {
        this.TestOption = {
          disabledDate: date => {
            //当前年份
            var DateYear = date.getFullYear();
            //当前月份
            var DateMonth =
              date.getMonth() + 1 < 10
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1;
            //当前日期
            var DateDay =
              date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            // 将所获得的日期拼接起来，格式为YY-MM-DD
            var FullDate = DateYear + "-" + DateMonth + "-" + DateDay;
            //判断，将不存在于接口数据中的日期禁用
            if (this.TestList.indexOf(FullDate) == -1) {
              return DateDay;
            }
          }
        };
      } else {
        console.log("......");
      }
    },
    // // 从接口中获取数据（有接口的时候使用）
    // TestAxios() {
    //   this.$axios.post("", {}).then(res => {
    //     var TestRes = res.data.result;
    //     for (let i = 0; i < TestRes.length; i++) {
    //       this.TestList.push(TestRes[i].time);
    //     }
    //     this.TestD = this.TestList[0];
    //   });
    // }
  }
};
</script>
<style lang="less" scoped>
.Box {
  width: 100%;
  height: 100%;
  background-color: rgba(214, 211, 167, 0.815);
}
.TimeS {
  position: absolute;
  top: 10%;
  left: 40%;
}
//日期选择器选择面板样式
/deep/span.ivu-date-picker-cells-cell-disabled,
span.ivu-date-picker-cells-cell-disabled:hover {
  background: transparent;
}
</style>

最后效果图：

 

 

 ps：本来是打算通过不同的样式来区分的，结果发现自己实力有限，所以采用了通过禁用的方式来进行区分

ps1：最初是选择for循环来对所要禁用的日期进行判断，但是发现 disabledDate 中 return 的是值而不是数组，所以使用for循环会导致全部禁用，与需求不符，最后选择 indexOf() 对其进行判断

ps2：代码中所注释的部分是当你通过接口来获取有数据的日期时所使用的，我这里数据写死，所以该部分注释掉了

ps3：前端菜鸟+语言表达能力不佳（我语文成绩明明很好的啊，mmp），所以只有这种表达水平了，如果有错误的话，还请大佬们轻点骂