vue el-date-picker动态限制时间范围案例详解
这篇文章主要介绍了vue el-date-picker动态限制时间范围案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
分为两种情况
1.开始时间和结束时间同一个框（限制只能本月）
2.开始时间和结束时间分开两个框（限制开始时间不能早于当前时间且结束时间不超过开始时间一星期）
情况1
//情况1 原创版权声明：本文为weixin_40998880原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 //本文链接：https://blog.csdn.net/weixin_40998880/article/details/106272897 //html
//script data(){ return { selectData: '', pickerOptions: { // 点击时，选择的是开始时间，也就是minDate onPick: ({ maxDate, minDate }) => { this.selectData = minDate.getTime() if (maxDate) { // 解除限制 this.selectData = '' } }, disabledDate: (time) => { // 是否限制的判断条件 if (!this.isNull(this.selectData)) { var date = new Date(this.selectData) // 这里就是限制的条件，这里为大于或者小于本月的日期被禁用(尽量不使用这种方法，因为其他年份的本月也能进行选择，具体限制日期参考情况2) return date.getMonth() > new Date(time).getMonth() || date.getMonth() 情况2
//情况2 //html
//script data(){ return { selectData: '', defaultTime: [], pickerOptions: [ { disabledDate: time => { const curDate = new Date().getTime(); const day = 14 * 24 * 3600 * 1000; const dateRegion = curDate + day; return ( time.getTime() dateRegion ); } }, { //限制结束时间为开始时间的一周后 disabledDate: time => { // 是否限制的判断条件 const date = new Date(this.editForm.beginTime); if (!this.isNull(date)) { const day = 7 * 24 * 3600 * 1000; const dateRegion = date.getTime() + day; return ( //禁用小于开始时间和大与开始时间一周后的日期 new Date(time).getTime() > dateRegion || new Date(time).getTime()
标签：