1200字范文 > jeDate日期控件时间最大值最小值禁用的bug修改

jeDate日期控件时间最大值最小值禁用的bug修改

时间：2019-05-11 22:34:05

背景：

之前有同事用过这个插件，遇到一个小问题，搜索了一下是一款比较小众，但是功能还是比较强大的日期插件。

如果有需求，可进一步了解jeDate的API，☞ jeDate日期控件 - JEUI-文档API ()

在这里就不介绍了，大家可以戳链接感受下

问题：

在设置最大值和最小值的日期时间后，时分秒一直是禁用状态，简单举个小栗子

jeDate("#demo",{minDate:'-06-16 10:20:25',maxDate:'2025-06-16 18:30:35',format: 'YYYY-MM-DD hh:mm:ss'});

上面的代码可以看到，我们给日期设置了一个可用区间，

在【-06-16 10:20:25，2025-06-16 18:30:35】这个区间可以点选，其他状态禁用

在最小日期的时候，理想状态下，我选择了-06-16 11点的时候，它的小时和分钟不应再是禁用状态了，但是目前的版本是一直禁用，上动图展示一下

问题展示动图：

不止是当天的日期，在选择这个时间范围内的日期时，小于最小日期时间的时分秒都是禁用状态，同理最大日期也是这样。

问题清晰了以后，第一步就是找补丁包或者更新下版本试试？我大概搜索了下，也没有找到合适的解决方案，只好翻一下插件的源码尝试改改，还好jeData的插件开发组写的代码十分清晰易读（在这里我谨代表自己夸奖一下开发组的成员给🥰）

解决：

step1:

分析一下情况，根据用户选择的日期和最小值最大值进行对比，渲染时分秒是否可用的状态，直接上笔记截图吧（打字累了，此处省略详细介绍）

step2:

下面是源码hmsClick方法改动，在时间点击的方法里面，从注释// todo start 到 // todo end 都是新增的代码

hmsClick:function(idx,num) {var pidx = parseInt(num), vals = parseInt(jet.text(this)), paridx = parseInt(idx), act = "action",mhms = ["hh","mm","ss"], ulCell = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx], tlen = that.$data.timelist[0].length;if(jet.hasClass(this,"disabled")) return;// todo startvar sd = that.selectDate,st = that.selectTime,minArr = jet.reMatch(that.minDate),minNum = parseInt(minArr[0]+""+jet.digit(minArr[1])+""+jet.digit(minArr[2])+""+jet.digit(minArr[3])+""+jet.digit(minArr[4])+""+jet.digit(minArr[5])),maxArr = jet.reMatch(that.maxDate), maxNum = parseInt(maxArr[0]+""+jet.digit(maxArr[1])+""+jet.digit(maxArr[2])+""+jet.digit(maxArr[3])+""+jet.digit(maxArr[4]+""+jet.digit(maxArr[5])))curVal = parseInt(sd[0].YYYY+""+jet.digit(sd[0].MM)+""+jet.digit(sd[0].DD)+""+jet.digit(st[0].hh)+""+jet.digit(st[0].mm)+""+jet.digit(st[0].ss))var curYMD = String(curVal).substring(0,8),minYMD = String(minNum).substring(0,8),maxYMD = String(maxNum).substring(0,8),curHH = Number(String(curVal).substring(8,10)),minHH = Number(String(minNum).substring(8,10)),maxHH = Number(String(maxNum).substring(8,10)),curMM = Number(String(curVal).substring(10,12)),minMM = Number(String(minNum).substring(10,12)),maxMM = Number(String(maxNum).substring(10,12)),curSS = Number(String(curVal).substring(12,14)),minSS = Number(String(minNum).substring(12,14)),maxSS= Number(String(maxNum).substring(12,14));// 1.curDate = minDateif(curYMD==minYMD){if(num==0&&vals>minHH){ // 选择小时且当前值>最小值的小时var ulCellM = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+1]jet.each(ulCellM.childNodes,function (i,node) {node.className = node.className=='disabled'?'':node.className;});var ulCellS = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+2]jet.each(ulCellS.childNodes,function (i,node) {node.className = node.className=='disabled'?'':node.className;});}else if(num==0&&vals==minHH){ // 选择小时且当前值=最小值的小时var ulCellM = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+1];var ulCellS = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+2];jet.each(ulCellM.childNodes,function (i,node) {if(curMM<=minMM){if(i==minMM){node.className = 'action'jet.each(ulCellS.childNodes,function (i,node) {if(i==minSS){node.className = 'action'} else if(i>minSS-1){node.className = ''} else {node.className = 'disabled'}});} else if(i>minMM-1){node.className = ''} else {node.className = 'disabled'}}else{if(i==curMM){node.className = 'action'} else if(i>minMM-1){node.className = ''} else {node.className = 'disabled'}}});}if(num==1&&vals>minMM){ // 选择分钟且当前值>最小值的分钟var ulCellS = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+1];jet.each(ulCellS.childNodes,function (i,node) {node.className = node.className=='disabled'?'':node.className;});}else if(num==1&&vals==minMM&&curHH==minHH){ // 选择分钟且当前值=最小值的分钟var ulCellS = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+1];jet.each(ulCellS.childNodes,function (i,node) {if(curSS<=minSS){if(i==minSS){node.className = 'action'} else if(i>minSS-1){node.className = ''} else {node.className = 'disabled'}}else{if(i==curSS){node.className = 'action'} else if(i>minSS-1){node.className = ''} else {node.className = 'disabled'}}});}}// 2.curDate = MaxDateif(curYMD==maxYMD){if(num==0&&vals<maxHH){ // 选择小时且当前值<最大值的小时var ulCellM = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+1]jet.each(ulCellM.childNodes,function (i,node) {node.className = node.className=='disabled'?'':node.className;});var ulCellS = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+2]jet.each(ulCellS.childNodes,function (i,node) {node.className = node.className=='disabled'?'':node.className;});}else if(num==0&&vals==maxHH){ // 选择小时且当前值=最大值的小时var ulCellM = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+1];var ulCellS = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+2];jet.each(ulCellM.childNodes,function (i,node) {if(curMM>=maxMM){if(i==maxMM){node.className = 'action'jet.each(ulCellS.childNodes,function (i,node) {if(i==maxSS){node.className = 'action'} else if(i-1<maxSS){node.className = ''} else {node.className = 'disabled'}});} else if(i-1<maxMM){node.className = ''} else {node.className = 'disabled'}}else{if(i==curMM){node.className = 'action'} else if(i-1<maxMM){node.className = ''} else {node.className = 'disabled'}}});}if(num==1&&vals<maxMM){ // 选择分钟且当前值<最大值的分钟var ulCellS = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+1];jet.each(ulCellS.childNodes,function (i,node) {node.className = node.className=='disabled'?'':node.className;});}else if(num==1&&vals==maxMM&&curHH==maxHH){ // 选择分钟且当前值=最大值的分钟var ulCellS = $Q(".jedate-time",that.dateCell).querySelectorAll("ul")[pidx+1];jet.each(ulCellS.childNodes,function (i,node) {if(curSS>=maxSS){if(i==maxSS){node.className = 'action'} else if(i-1<maxSS){node.className = ''} else {node.className = 'disabled'}}else{if(i==curSS){node.className = 'action'} else if(i-1<maxSS){node.className = ''} else {node.className = 'disabled'}}});}}// todo end jet.each(ulCell.childNodes,function (i,node) {var reg = new RegExp("(^|\\s+)" + act + "(\\s+|$)", "g");node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;});that.selectTime[paridx][paridx == 1 ? mhms[pidx-tlen]:mhms[pidx]] = vals;this.className = this.className + act;var hmsCls = ulCell.querySelector("."+act);ulCell.scrollTop = hmsCls ? (hmsCls.offsetTop-145):0; if(that.dlen == 7 && idx == 0 && range && !multi){var nVal = that.getValue({}), nYM = jet.nextMonth(nVal[0].YYYY,nVal[0].MM),st = that.selectTime;that.storeData({YYYY:nVal[0].YYYY,MM:nVal[0].MM,DD:null,hh:st[0].hh,mm:st[0].mm,ss:st[0].ss},{YYYY:nYM.y,MM:nYM.m,DD:null,hh:st[1].hh,mm:st[1].mm,ss:st[1].ss});that.renderDate();}if(multi == false){seltime = that.dlen == 7 && opts.range && !isnext ? timeA : timeB;if(that.dlen == 7 && opts.range && jet.valText(valCell) == ""){that.selectTime[1] = jet.extend(timeB,timeA);} RES.timelist.push(that.eachTime(seltime,2)); }},

step3:

修改eachTime遍历，根据日期年月日的选择，对时分秒状态进行渲染

eachTime : function (hmsArr,type,level,hms) { var that = this,opts = that.$opts, range = opts.range,multi = opts.multiPane, minVal = [], maxVal = [],mhms = ["hh","mm","ss"], timeArr = [],hmsCls = '',format = that.format, ntVal = jet.trim(that.minDate).replace(/\s+/g," "), xtVal = jet.trim(that.maxDate).replace(/\s+/g," "), nVal = ntVal.split(" "), xVal = xtVal.split(" ");if(that.dlen>3 && /\:/.test(nVal) && /\:/.test(xVal)){minVal = jet.reMatch(/\s/.test(ntVal)&&that.dlen>3 ? nVal[1] : ntVal);maxVal = jet.reMatch(/\s/.test(xtVal)&&that.dlen>3 ? xVal[1] : xtVal);}jet.each([24,60,60],function (s,lens) {timeArr[s] = [];var unhmsVal = minVal[s] == undefined || minVal[s] == 0 ? hmsArr[mhms[s]] : minVal[s],currVal = that.getValue() == "" ? unhmsVal : hmsArr[mhms[s]];var unhmsValMax = maxVal[s] == undefined || maxVal[s] == 0 ? hmsArr[mhms[s]] : maxVal[s],currValMax = that.getValue() == "" ? unhmsValMax : hmsArr[mhms[s]];if(that.dlen>3 && /\:/.test(nVal) && type==1){that.selectTime[0][mhms[s]] = currVal;}for (var h = 0; h < lens; h++) {var exists = new RegExp(mhms[s],"g").test(format);if(undefined!=level&&level=='median') {if(h == currVal){hmsCls = exists ? "action" : ""; }else if(!exists || !range && multi){ hmsCls = "";}else if(!multi){hmsCls = type == 1 ? "" : "";}else{hmsCls = ""; }}else if(undefined!=level&&level=='min'){if(h == currVal){hmsCls = exists ? "action" : "disabled"; }else if(!exists || !range && multi &&(h<minVal[s])){ hmsCls = "disabled";}else if(!multi){hmsCls = type == 1&&h<minVal[s] ? "disabled" : "";}else{hmsCls = ""; }}else if(undefined!=level&&level=='max'){if(h == currValMax){hmsCls = exists ? "action" : "disabled"; }else if(!exists || !range && multi &&(h>maxVal[s])){ hmsCls = "disabled";}else if(!multi){hmsCls = type == 1&& type == 2&&h>maxVal[s] ? "disabled" : "";}else{hmsCls = ""; }}timeArr[s].push({style:hmsCls,hms:h});}}); return timeArr;},