DatePicker日期选择器算是日常开发中用得比较多的插件之一了,特别是做一些后台管理系统,选择时间、日期也是特别的方便,相比于原生的input中的date,elementUI中的日期选择器显得更加的好看,暴露出的方法也更加的使用方便。下面我们一起来看一下它的其中一个方法,禁用日期disabledDate。
DatePicker 日期选择器
PS:由于工作需要,并未使用elementUI较新的版本,而是使用了停止更新的1.4版本。
我们知道,常用的禁止日期方法已经在第一个demo中展示,通过配置picker-options中的disabledDate属性,而disabledDate通常是一个函数,其有一个默认的参数,表示可供选择的时间,还有一个为布尔类型的返回值,返回true表示该时间可用,反之为不可用。
(PS:文档上并未明确指出该参数代表的是什么。其使用的参数名为time,本人通过log调试,感觉应该是表示可供选择的时间)。
官网给出的demo更多的是一些固定的时间,比如一天前,一周前等等,使用方法也十分简单。
只需要//script部分data() { return { value: '', pickerOptions: {
disabledDate(time) { return time.getTime()
}
}
}//template部分
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
如上文所述,一个picker-options对象中,包含了一个key为disabledDate,value为一个返回值为布尔值的函数。其中,函数有一个默认参数为time。
为什么要多次强调这里有一个默认参数呢,因为坑就在这里....想象一下这样的场景
需要禁用的时间并非是基于今天的某个时间,这个时间是不固定的,并非是Date.now()。这里可以这样处理,把时间变量放在data中,具体代码如下://script部分data() { return { value: '', date: '', pickerOptions: {}
}
created () { this.pickerOptions = {
disabledDate(time) { return time.getTime()
}
}
}//template部分
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
当然这是在知道时间变量this.date的情况下可以这样做,如果这个时间变量并不是那么好找的时候呢?
我就遇到这样一个场景,需要动态渲染一些时间表单,但是具体表单的数量,名称都不知道,是后端传过来的数据,这个时候就不能预先找到'this.date'了,因为连this.date本身,也是根据后端传来的数据生成的。
这个时候,就需要传参了,把我需要限制的时间传递到disabledDate这个函数中。
我们知道,这个函数有默认的参数time,如果正常的传参,会导致time丢失,那么应该怎么处理呢,请看下面的代码://script部分data() { return { value: '', pickerOptions: {}
}
created () { this.pickerOptions = function (date) { return disabledDate(time) { return time.getTime()
}
}
}//template部分
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions(DateParam)">
其实可以看出,就是做了一个闭包,将参数传过去的同时不破坏disabledDate本身的传参,这样无论是参数,还是time都拿到了。完美解决时间禁用问题。
写在后面
当然,这种闭包的思路并不是对于所有的elementUI控件有默认值的方法都是生效的,之前有试过checkBox控件的change方法,貌似是行不通的。在网上查询后发现是使用$event去表示默认传参,具体代码如下:
具体原理并未深究,有时间的话可以去研究一下...现在是能解决问题就OK了.
作者:moonburn
链接:https://www.jianshu.com/p/af5fb9d657ce