背景：

之前有同事用過這個插件，遇到一個小問題，搜索了一下是一款比較小眾，但是功能還是比較強大的日期插件。

如果有需求，可進一步了解jeDate的API，? jeDate日期控件 - JEUI-文檔API (jemui.com)

在這里就不介紹了，大家可以戳鏈接感受下

問題：

在設置最大值和最小值的日期時間后，時分秒一直是禁用狀態，簡單舉個小栗子

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

上面的代碼可以看到，我們給日期設置了一個可用區間，

在【2015-06-16 10:20:25，2025-06-16 18:30:35】這個區間可以點選，其他狀態禁用

在最小日期的時候，理想狀態下，我選擇了2015-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;},

修改后的效果圖：

巴拉巴拉，此處省略文字描述，最后問題解決了，撒花?~

?最后放一個完整版的jeDate.js的文件吧，戳下載鏈接👇

jeDate日期控件時間最大值最小值禁用的bug修改-Javascript文檔類資源-CSDN文庫

總結

以上是生活随笔為你收集整理的jeDate日期控件 时间最大值最小值禁用的bug修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。