elementUI中的日期选择器（DatePicker）根据返回时间禁用

最新推荐文章于 2024-03-07 18:29:35 发布

番凪_BanNagi

最新推荐文章于 2024-03-07 18:29:35 发布

阅读量2k

点赞数 2

文章标签： vue ElementUI 时间选择器

本文链接：https://blog.csdn.net/exjkbasv/article/details/103369584

版权

elementUI的日期选择器中的disabledDate属性可以设置禁用时间，但是有的时候会出现当后台返回的不是时间段而是时间点时，禁用方法如下↓

//首先设置想要禁用的时间
 data() {
      return {
        value2: '',
		pickerOptions: {},
		dateParam:[
			"2019-12-08 00:00:00",
			"2019-12-10 00:00:00",
			"2019-12-15 00:00:00",
			"2019-12-17 00:00:00",
			"2019-12-24 00:00:00",
			"2020-01-02 00:00:00",
		],
      };
    },
    //然后进行for循环
	this.pickerOptions={
		disabledDate: (time) => {
			// time是当前显示面板的每一个日期       
			for(let i=0;i<this.dateParam.length;i++){
			// 其中res.dateParam为获取到的需要禁用的时间
				if(time.getTime() == new Date(res.dateParam[i]).getTime()){
				// disabledDate属性：true为禁用，false为可用
					return true
				}
			}
		}
	}