当前位置: 首页 > Web前端 > HTML

element-ui时间选择器限制范围(下)

时间:2023-04-02 17:56:22 HTML

要求:选择日期范围,但选择范围需要在一周以内。举个例子:假设第一个日期选择为1月17日,那么1月11日之前和1月23日之后的日期需要设置为禁止。方法:考虑到有两种设计方法:1.由两个独立的时间选择器控制,实现起来比较混乱。2.使用日期范围选择器。第一种方法没有demo,有特殊需求的请留言。这里我选择使用日期范围选择器,可以预见使用起来代码会干净很多。效果图:代码:data(){let_minTime=nulllet_maxTime=nullreturn{datePick:[newDate().format("yyyy-MM-dd"),newDate().format("yyyy-MM-dd")],//默认选择当天,看个人需要pickerOptions:{onPick(time){//如果选择只选择一次if(!time.maxDate){lettimeRange=6*24*60*60*1000//6天_minTime=time.minDate.getTime()-timeRange//最短时间_maxTime=time.minDate.getTime()+timeRange//最大时间//如果选择了两次,则清除范围判断数据以备重选}else{_minTime=_maxTime=null}},disabledDate(time){//之后触发onPick//该方法会轮询3个月内的每个日期,返回false表示该日期被禁用if(_minTime&&_maxTime){returntime.getTime()<_minTime||时间.getTime()>_maxTime}}}}}