需求:控制起始时间和结束之间,不能选择节假日,周末。
起始时间和节假日都是后台返回过来的。
image.png
开始吧!
一、前提:全局引用elementUI插件
自行根据element官网引用
二、在HTML页面引用日历组件
:editable="false" ----文本框不可输入
:picker-options="pickerOptions" 把禁选方法写在这个方法里
image.png
三、处理数据
-
data里定义数据
image.png - 从后台拿的的数据格式是(不是这个格式可以自行处理下):
start:“2019/08/06” end:"2019/09/05"
stopDays:["2019/08/10","2019/08/11","2019/08/17","2019/08/18","2019/08/24"........]
四、把数据写进禁选方法里
image.png
五、结束语
- 如果后台返回的数据格式不是这个格式,最好先用JS处理一下
- 在禁选方法disableDate里,时间的处理都是时间戳
- 禁选的时间返回true ;可以选的时间返回false