vue el-date-picker动态限制时间范围案例详解

 //情况1 原创版权声明：本文为weixin_40998880原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 //本文链接：https://blog.gaodaimna/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() </div><blockquote>情况2</p></blockquote><div class="gaodaimacode"><pre class="prettyprint linenums"> //情况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() <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.getTim<em>本文来源[email protected]搞@^&代*@码2网</em>e() + 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" ]; }, }