背景：
之前有同事用过这个插件，遇到一个小问题，搜索了一下是一款比较小众，但是功能还是比较强大的日期插件。
如果有需求，可进一步了解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 start
var 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 = minDate
if(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 = MaxDate
if(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的文件吧，戳下载链接👇
扫一扫
5315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
