vue|vue el-date-picker动态限制时间范围案例详解 vueel-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: {// 点击时，选择的是开始时间，也就是minDateonPick: ({ maxDate, minDate }) => {this.selectData = https://www.it610.com/article/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() < new Date(time).getMonth()} else {return false}}}}},methods:{// 检查是否为空isNull(value) {if (value) {return false}return true}}

【vue|vue el-date-picker动态限制时间范围案例详解】情况2

//情况2//html

//scriptdata(){return {selectData: '',defaultTime: [],pickerOptions: [{disabledDate: time => {const curDate = new Date().getTime(); const day = 14 * 24 * 3600 * 1000; const dateRegion = curDate + day; return (time.getTime() < Date.now() - 8.64e7 ||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() < date.getTime()); } else {return false; }}}],}},methods:{// 检查是否为空isNull(value) {if (value) {return false}return true},//获得当前时间并添加选中时的默认值getNowTime() {let d = new Date(); let year, month, day, hour, minute; //当前时间的十分钟后d.setTime(d.getTime() + 10 * 60 * 1000); [year, month, day, hour, minute] = [d.getFullYear(),d.getMonth(),d.getDate(),d.getHours(),d.getMinutes()]; let hour2 = hour + 1; //选中开始时间时的默认值为当前时间的十分钟后//选中结束时间时的默认值为当前时间的一个小时十分钟后this.defaultTime = [hour + ":" + minute + ":00",hour2 + ":" + minute + ":00"]; },}

到此这篇关于vue el-date-picker动态限制时间范围案例详解的文章就介绍到这了,更多相关vue el-date-picker动态限制时间范围内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！