element中DatePicker选择指定日期？

Question

问题描述

在使用element中的DatePicker组件时，我想把可选日期限制在一个数组中，在这个数组中的日期是可以选择的，而其他日期是disabled

问题出现的环境背景及自己尝试过哪些方法

尝试在picker-options中使用disabledDate，但是报错了

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

// avaiableDateList是一个日期数组，例如['2019-02-01','2019-02-02',...]
disabledDate: (time) => {
     let date = moment(time.getTime()).format('YYYY-MM-DD')
     return this.avaiableDateList.indexOf(date) === -1;
}

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

之前我错了

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.5.4/lib/index.js"></script>
<div id="app">
<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
</div>

var Main = {
    data() {
      return {
        avaiableDateList:['2019-02-01','2019-02-02','2019-02-04','2019-02-05','2019-02-08'],
        pickerOptions: {
          disabledDate:(time)=>{
            var date = time.Format("yyyy-MM-dd");
                     return !this.avaiableDateList.includes(date);
          }
        },
        value1: ''
      };
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Date.prototype.Format = function (fmt) { //author: meizz
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
//var time1 = new Date().Format("yyyy-MM-dd");var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");

Answer 2

 pickerDate:{
                    disabledDate: (time) => {
                        let beginDate =new Date('2018-01-02')
                        let    endDate =new Date('2019-01-02')
                        return time.getTime() > endDate.getTime() || time.getTime() <beginDate.getTime()
                    }
                }

这样试试