前端jquery日期插件

分享一个前端jquery日期插件，方便自己后面需要时查找使用。

效果：

1、html demo。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>时间控件</title><link rel="stylesheet" href="dateSelect.css"><script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="mobileSelect.js"></script><script src="dateSelect.js"></script><style> html,body{margin: 0;padding: 0;background-color: #ffffff;font-size: 16px;font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;height: 100%;}*{margin: 0;padding: 0;}.list{margin: 50px 25px 0 25px;text-align: center;}.list>li{list-style: none;border: #CCCCCC solid 1px;height: 32px;line-height: 32px;border-radius: 5px;margin-bottom: 15px;}.colors{color: #E60012 !important;}.mobileSelect .content{width: 96% !important;border-radius: 0.3rem !important;bottom: 1rem !important;margin-left: 2% !important;}.cancel{color: #E60012 !important;}.title{color: #333 !important;}.ensure{color: #007AFF !important;}.selectLine{display: flex;align-items: center;}.selectLine span{width: 33.3%;height: 40px;display: flex;align-items: center;justify-content: flex-end;padding-bottom: 3px;}</style>
</head>
<body><h3 style="line-height: 50px">点击下方输入框</h3><div><input type="text" id="select_0" placeholder="请选择开始时间"/> <input type="text" id="select_1" placeholder="请选择结束时间"/> </div>
</body>
</html>
<script>//选择 YYYY-MM-dd 格式的调用：$.selectYY_MM_DD("#select_0");$.selectYY_MM_DD("#select_1");
</script>

2、 dateSelect.css

.mobileSelect{position: relative;z-index: 0;opacity: 0;visibility: hidden;-webkit-transition: all 0.4s;transition: all 0.4s;
}
.mobileSelect .grayLayer {position: fixed;top: 0;left: 0;bottom: 0;right: 0;background: #eee;background: rgba(0, 0, 0, 0.7);z-index: 888;display: block;
}
.mobileSelect .content {width: 100%;display: block;position: fixed;z-index: 889;color: black;-webkit-transition: all 0.4s;transition: all 0.4s;bottom: -350px;left:0;background: white;
}
.mobileSelect .content .fixWidth {width: 90%;margin: 0 auto;position: relative;
}
.mobileSelect .content .fixWidth:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;
}
.mobileSelect .content .btnBar {border-bottom: 1px solid #DCDCDC;font-size: 15px;height: 45px;position: relative;text-align: center;line-height: 45px;
}
.mobileSelect .content .btnBar .cancel,
.mobileSelect .content .btnBar .ensure {height: 45px;width: 55px;cursor: pointer;position: absolute;top: 0;
}
.mobileSelect .content .btnBar .cancel {left: 0;color: #666;
}
.mobileSelect .content .btnBar .ensure {right: 0;color: #1e83d3;
}
.mobileSelect .content .btnBar .title {font-size: 15px;
}
.mobileSelect .content .panel:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;
}
.mobileSelect .content .panel .wheels {width: 100%;height: 200px;overflow: hidden;
}
.mobileSelect .content .panel .wheel {position: relative;z-index: 0;float: left;width: 50%;height: 200px;overflow: hidden;-webkit-transition: width 0.3s ease;transition: width 0.3s ease;
}
.mobileSelect .content .panel .wheel .selectContainer {display: block;text-align: center;-webkit-transition: -webkit-transform 0.18s ease-out;transition: -webkit-transform 0.18s ease-out;transition: transform 0.18s ease-out;transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
}
.mobileSelect .content .panel .wheel .selectContainer li {font-size: 20px;display: block;height: 40px;line-height: 40px;cursor: pointer;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.mobileSelect .content .panel .selectLine {height: 40px;width: 100%;position: absolute;top: 80px;pointer-events: none;-webkit-box-sizing: border-box;box-sizing: border-box;border-top: 1px solid #DCDCDC;border-bottom: 1px solid #DCDCDC;
}
.mobileSelect .content .panel .shadowMask {position: absolute;top: 0;width: 100%;height: 200px;background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);opacity: 0.9;pointer-events: none;
}
.mobileSelect-show {opacity: 1;z-index: 10000;visibility: visible;
}
.mobileSelect-show .content {bottom: 0;
}

3、dateSelect.js

$.extend({//年月日selectYY_MM_DD: function(g, a, k) {var d, e, b  ;b = new Date;var starYear = b.getFullYear() - 55 ;//最小选项var maxYear = b.getFullYear()+5;//最大的选项 d = starYear; e = maxYear;b = [10,0,0];var dateVal = $(g).val(); //获取输入框的值 if( dateVal != undefined && dateVal != ""){ dateVal = dateVal.split("-");//设置默认选择的项dateVal && 3 == dateVal.length ? b = [dateVal[0] -  starYear , dateVal[1] -1 , dateVal[2] -1 ] : b = b; } else{var nowDate = new Date;b=[nowDate.getFullYear()-starYear,nowDate.getMonth(),nowDate.getDate()-1]}new MobileSelect({trigger: g, title: '选择时间',wheels: function(a, b) {for (var d = [{ data: []  }]; a <= b; a++) {for (var e = { id: a, value: a , childs: [] }, c = 1; 12 >= c; c++) {for (var h = [], g = (1 == c || 3 == c || 5 == c || 7 == c || 8 == c || 10 == c || 12 == c) ? 31 : 2 == c ? 0 == a % 4 && 0 != a % 100 ? 29 : 0 == a % 400 ? 29 : 28 : 30, f = 1; f <= g; f++) h.push({ id: f < 10 ? '0' + f : f,  value: f < 10 ? '0' + f : f  });e.childs.push({  id: c < 10 ? '0' + c : c,  value: c < 10 ? '0' + c : c , childs: h < 10 ? '0' + h :h })}d[0].data.push(e)}return d}(d, e),position: b,callback: function(a, b) {if(k != undefined){k({year: b[0].id,month: b[1].id,day: b[2].id})} }})}//年月,selectDate_YM: function(el, cbFn) { /*创建日期数据*/var createDateData = function(info) {var dateData = [{data: []}];var childData = [];for (var j = 1; j <= 12; j++) {if (j < 10) {childData.push({id: '0' + j,value: '0' + j});} else {childData.push({id: j,value: j});}}for (var i = info.startYear; i <= info.maxYear; i++) {dateData[0].data.push({id: i,value: i,childs: childData});}return dateData;};var info = {},now = new Date();info.nowYear = now.getFullYear();info.nowMonth = (now.getMonth() + 1);info.startYear = info.nowYear - 60; //最小的选项 info.maxYear = info.nowYear + 3; //最大的选项var dateVal = $(el).val(); //获取输入框的值var tempos = [10, 0];if (dateVal != undefined && dateVal != "") { dateVal = dateVal.split("-");//设置默认选择的项dateVal && 2 == dateVal.length ? tempos = [dateVal[0] - info.startYear, dateVal[1] - 1] : tempos = tempos; }//年月 带有至今选项var selectDate_YM = new MobileSelect({trigger: el,title: '选择年月',wheels: createDateData(info),position: tempos,//设置默认选择的项callback: function(item, data) {if (data.length > 1) {var dateInfo = {year: data[0].id,month: data[1].id,};} else {var dateInfo = {year: data[0].id,};}cbFn && cbFn(dateInfo);}});}//专门用于结束时间，有至今选项,selectDate_YM_END: function(el, cbFn) {/*创建日期数据*/var createDateData = function(info) {var dateData = [{data: []}];var childData = [];for (var j = 1; j <= 12; j++) {if (j < 10) {childData.push({id: '0' + j,value: '0' + j});} else {childData.push({id: j,value: j});}}for (var i = info.startYear; i <= info.maxYear; i++) {dateData[0].data.push({id: i,value: i,childs: childData});}//如果是结束日期的  加上至今选项if ($(el).data("type") == "end") dateData[0].data.push({id: info.maxYear + 1,value: "至今"});return dateData;};var info = {},now = new Date();info.nowYear = now.getFullYear();info.nowMonth = (now.getMonth() + 1);info.startYear = info.nowYear - 60; //最小的选项 info.maxYear = info.nowYear; //最大的选项var dateVal = $(el).val(); //获取输入框的值var tempos = [10, 0];if (dateVal != undefined && dateVal != "") {if (dateVal == "至今") {tempos = [info.maxYear - info.startYear + 1];} else {dateVal = dateVal.split("-");//设置默认选择的项dateVal && 2 == dateVal.length ? tempos = [dateVal[0] - info.startYear, dateVal[1] - 1] : tempos = tempos;}}var selectDate_YM_END = new MobileSelect({trigger: el,title: '选择年月',wheels: createDateData(info),position: tempos,//设置默认选择的项callback: function(item, data) {if (data.length > 1) {var dateInfo = {year: data[0].id,month: data[1].id,};} else {var dateInfo = {year: data[0].id,};}cbFn && cbFn(dateInfo);}});}//年, selectDate_Y: function(el, cbFn) {/*创建日期数据*/var createDateData = function(info) {var dateData = [{data: []}];for (var i = info.startYear; i <= info.maxYear; i++) {dateData[0].data.push({id: i,value: i});} return dateData;};var info = {},now = new Date();info.nowYear = now.getFullYear();info.nowMonth = (now.getMonth() + 1);info.startYear = info.nowYear - 60; //最小的选项 info.maxYear = info.nowYear ; //最大的选项var dateVal = $(el).val(); //获取输入框的值var tempos = [info.maxYear - info.startYear , 0];//设置初始值if (dateVal != undefined && dateVal != "") {dateVal = dateVal.split("-");//设置默认选择的项dateVal && 1 == dateVal.length ? tempos = [dateVal[0] - info.startYear] : tempos = tempos;}var selectDate_Y = new MobileSelect({trigger: el,title: '选择年份',wheels: createDateData(info),position: tempos,//设置默认选择的项callback: function(item, data) {if (data.length > 1) {var dateInfo = {year: data[0].id,};} else {var dateInfo = {year: data[0].id,};}cbFn && cbFn(dateInfo);}});}//时分,select_HH_MM: function(el, cbFn) {/*创建日期数据*/var createDateData = function(info) {var dateData = [{data: []}];var childData = [];//分钟for (var j = 0; j <= 59; j++) {if (j < 10) {childData.push({id: '0' + j,value: '0' + j});} else {childData.push({id: j,value: j});}}//小时for (var i = info.startHour; i <= info.maxHour; i++) {var pra = i < 10 ? '0' + i: i dateData[0].data.push({ id: pra,  value: pra, childs: childData  });}return dateData;};var info = {};info.startHour = 0;info.maxHour = 23;info.startMinute = 0; //最小的选项 info.maxMinute = 59; //最大的选项var designTimeVal = $(el).val(); //获取输入框的值var tempos = [0, 0];if (designTimeVal != undefined && designTimeVal != "") {designTimeVal = designTimeVal.split(":");//设置默认选择的项designTimeVal && 2 == designTimeVal.length ? tempos = [designTimeVal[0] - info.startHour, designTimeVal[1]] : tempos = tempos;}var select_HH_MM = new MobileSelect({trigger: el,title: '选择时分',connector: ':',wheels: createDateData(info),position: tempos,//设置默认选择的项callback: function(item, data) {if (data.length > 1) {var dateInfo = {year: data[0].id,month: data[1].id,};} else {var dateInfo = {year: data[0].id,};}cbFn && cbFn(dateInfo);}});}//时分秒,select_HH_MM_SS: function(el, cbFn) {/*创建日期数据*/var createDateData = function(info) {var dateData = [{data: []}];var childData = [] , childDatass = [];//秒钟for (var j = 0; j <= 59; j++) {if (j < 10) {childDatass.push({id: '0' + j,value: '0' + j});} else {childDatass.push({id: j,value: j });}}//分钟for (var j = 0; j <= 59; j++) {if (j < 10) {childData.push({id: '0' + j,value: '0' + j,childs: childDatass});} else {childData.push({id: j,value: j,childs: childDatass});}}//小时for (var i = info.startHour; i <= info.maxHour; i++) {var pra = i < 10 ? '0' + i: i dateData[0].data.push({ id: pra,  value: pra, childs: childData  });}return dateData;};var info = {};info.startHour = 0;info.maxHour = 23;info.startMinute = 0; //最小的选项 info.maxMinute = 59; //最大的选项var designTimeVal = $(el).val(); //获取输入框的值var tempos = [0, 0 , 0];if (designTimeVal != undefined && designTimeVal != "") {designTimeVal = designTimeVal.split(":");//设置默认选择的项designTimeVal && 3 == designTimeVal.length ? tempos = [designTimeVal[0] - info.startHour, designTimeVal[1] ,designTimeVal[2]] : tempos = tempos;}else{var nowDate = new Date;tempos=[nowDate.getFullYear(),nowDate.getMonth() + 1,nowDate.getDate()]}var select_HH_MM = new MobileSelect({trigger: el,title: '选择时分秒',connector: ':',wheels: createDateData(info),position: tempos,//设置默认选择的项callback: function(item, data) {if (data.length > 1) {var dateInfo = {year: data[0].id,month: data[1].id,};} else {var dateInfo = {year: data[0].id,};}cbFn && cbFn(dateInfo);}});}
});

mobileSelect.js

(function() {function getClass(dom,string) {return dom.getElementsByClassName(string);}//构造器function MobileSelect(config) {this.mobileSelect;this.wheelsData = config.wheels;this.jsonType =  false;this.cascadeJsonData = [];this.displayJson = []; this.cascade = false;this.startY;this.moveEndY;this.moveY;this.oldMoveY;this.offset = 0;this.offsetSum = 0;this.oversizeBorder;this.curDistance = [];this.clickStatus = false;this.isPC = true;this.init(config);}MobileSelect.prototype = {constructor: MobileSelect,init: function(config){var _this = this; _this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'};_this.checkDataType();_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText);_this.trigger = document.querySelector(config.trigger);if(!_this.trigger){console.error('mobileSelect has been successfully installed, but no trigger found on your page.');return false;}_this.wheel = getClass(_this.mobileSelect,'wheel');_this.slider = getClass(_this.mobileSelect,'selectContainer'); _this.wheels = _this.mobileSelect.querySelector('.wheels');_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;_this.ensureBtn = _this.mobileSelect.querySelector('.ensure');_this.cancelBtn = _this.mobileSelect.querySelector('.cancel');_this.grayLayer = _this.mobileSelect.querySelector('.grayLayer');_this.popUp = _this.mobileSelect.querySelector('.content');_this.callback = config.callback ? config.callback : function(){};_this.transitionEnd = config.transitionEnd ? config.transitionEnd : function(){};_this.initPosition = config.position ? config.position : [];_this.titleText = config.title ? config.title : '';_this.connector = config.connector != undefined && config.connector != "" ? config.connector : '-';//拼接值的连接符_this.trigger.style.cursor='pointer';_this.setStyle(config);_this.setTitle(_this.titleText);_this.checkIsPC();_this.checkCascade();if (_this.cascade) {_this.initCascade();}//定位 初始位置if(_this.initPosition.length < _this.slider.length){var diff = _this.slider.length - _this.initPosition.length;for(var i=0; i<diff; i++){_this.initPosition.push(0);}}_this.setCurDistance(_this.initPosition);_this.addListenerAll();//按钮监听_this.cancelBtn.addEventListener('click',function(){_this.mobileSelect.classList.remove('mobileSelect-show');});//点击确认选择_this.ensureBtn.addEventListener('click',function(){_this.mobileSelect.classList.remove('mobileSelect-show');var tempValue ='',tempIdValue ='';for(var i=0; i<_this.wheel.length; i++){i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;i==_this.wheel.length-1 ? tempIdValue = _this.getDataId(i) : '';}_this.trigger.value = tempValue;$(_this.trigger).data("value",tempIdValue);//把编号赋值到输入框的data-value_this.callback(_this.getIndexArr(),_this.getValue());});_this.trigger.addEventListener('click',function(){_this.mobileSelect.classList.add('mobileSelect-show');// var date = new Date();// var year = date.getFullYear();// var month = date.getMonth() + 1;// var day = date.getDate();// if (month < 10) {//   month = "0" + month;// }// if (day < 10) {//     day = "0" + day;// }// console.log(year);// console.log(month);// console.log(day);$('.wheels').eq(0).find('li').attr("style","color:#000 !important")$('.wheels').eq(1).find('li').attr("style","color:#000 !important")var tempValue ='',tempIdValue ='';for(var i=0; i<_this.wheel.length; i++){i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;i==_this.wheel.length-1 ? tempIdValue = _this.getDataId(i) : '';}var ddd=tempValue.split("-")//console.log(ddd)var s1=$(".wheels").eq(0).find(".selectContainer")[0];var s2=$(".wheels").eq(0).find(".selectContainer")[1];var s3=$(".wheels").eq(0).find(".selectContainer")[2];$(s1).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[0]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})$(s2).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[1]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})$(s3).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[2]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})var s4=$(".wheels").eq(1).find(".selectContainer")[0];var s5=$(".wheels").eq(1).find(".selectContainer")[1];var s6=$(".wheels").eq(1).find(".selectContainer")[2];$(s4).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[0]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})$(s5).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[1]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})$(s6).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[2]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})});_this.grayLayer.addEventListener('click',function(){_this.mobileSelect.classList.remove('mobileSelect-show');});_this.popUp.addEventListener('click',function(){event.stopPropagation(); });_this.fixRowStyle(); //修正列数},setTitle: function(string){var _this = this;_this.titleText = string;_this.mobileSelect.querySelector('.title').innerHTML = _this.titleText;},setStyle: function(config){var _this = this;if(config.ensureBtnColor){_this.ensureBtn.style.color = config.ensureBtnColor;}if(config.cancelBtnColor){_this.cancelBtn.style.color = config.cancelBtnColor;}if(config.titleColor){_this.title = _this.mobileSelect.querySelector('.title');_this.title.style.color = config.titleColor;}if(config.textColor){_this.panel = _this.mobileSelect.querySelector('.panel');_this.panel.style.color = config.textColor;}if(config.titleBgColor){_this.btnBar = _this.mobileSelect.querySelector('.btnBar');_this.btnBar.style.backgroundColor = config.titleBgColor;}if(config.bgColor){_this.panel = _this.mobileSelect.querySelector('.panel');_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask');_this.panel.style.backgroundColor = config.bgColor;_this.shadowMask.style.background = 'linear-gradient(to bottom, '+ config.bgColor + ', rgba(255, 255, 255, 0), '+ config.bgColor + ')';}},checkIsPC: function(){var _this = this;var sUserAgent = navigator.userAgent.toLowerCase();var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";var bIsMidp = sUserAgent.match(/midp/i) == "midp";var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";var bIsAndroid = sUserAgent.match(/android/i) == "android";var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";if ((bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {_this.isPC = false;}},show: function(){this.mobileSelect.classList.add('mobileSelect-show'); },renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){var _this = this;var cancelText = cancelBtnText ? cancelBtnText : '取消';var ensureText = ensureBtnText ? ensureBtnText : '确认';_this.mobileSelect = document.createElement("div");_this.mobileSelect.className = "mobileSelect";_this.mobileSelect.innerHTML = '<div class="grayLayer"></div>'+'<div class="content">'+'<div class="btnBar">'+'<div class="fixWidth">'+'<div class="cancel">'+ cancelText +'</div>'+'<div class="title"></div>'+'<div class="ensure">'+ ensureText +'</div>'+'</div>'+'</div>'+'<div class="panel">'+'<div class="fixWidth">'+'<div class="wheels">'+'</div>'+'<div class="selectLine"><span>年</span><span>月</span><span>日</span></div>'+'<div class="shadowMask"></div>'+'</div>'+'</div>'+'</div>';document.body.appendChild(_this.mobileSelect);//根据数据长度来渲染var tempHTML='';for(var i=0; i<wheelsData.length; i++){ //列tempHTML += '<div class="wheel"><ul class="selectContainer">';if(_this.jsonType){for(var j=0; j<wheelsData[i].data.length; j++){ //行tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>';}}else{for(var j=0; j<wheelsData[i].data.length; j++){ //行tempHTML += '<li>'+wheelsData[i].data[j]+'</li>';}}tempHTML += '</ul></div>';}_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML;},addListenerAll: function(){var _this = this;for(var i=0; i<_this.slider.length; i++){//手势监听(function (i) {_this.addListenerWheel(_this.wheel[i], i);_this.addListenerLi(i);})(i);}},addListenerWheel: function(theWheel, index){var _this = this;theWheel.addEventListener('touchstart', function () {_this.touch(event, this.firstChild, index);},false);theWheel.addEventListener('touchend', function () {_this.touch(event, this.firstChild, index);},false);theWheel.addEventListener('touchmove', function () {_this.touch(event, this.firstChild, index);},false);if(_this.isPC){//如果是PC端则再增加拖拽监听 方便调试theWheel.addEventListener('mousedown', function () {_this.dragClick(event, this.firstChild, index);},false);theWheel.addEventListener('mousemove', function () {_this.dragClick(event, this.firstChild, index);},false);theWheel.addEventListener('mouseup', function () {_this.dragClick(event, this.firstChild, index);},true); }},addListenerLi:function(sliderIndex){var _this = this;var curWheelLi = _this.slider[sliderIndex].getElementsByTagName('li');for(var j=0; j<curWheelLi.length;j++){(function (j) {curWheelLi[j].addEventListener('click',function(){_this.singleClick(this, j, sliderIndex);},false);})(j);}},checkDataType: function(){ var _this = this;if(typeof(_this.wheelsData[0].data[0])=='object'){_this.jsonType = true;}},checkCascade: function(){var _this = this;if(_this.jsonType){ var node = _this.wheelsData[0].data;for(var i=0; i<node.length; i++){if(_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0){_this.cascade = true;_this.cascadeJsonData = _this.wheelsData[0].data;break;}}}else{_this.cascade = false;}},generateArrData: function (targetArr) {var tempArr = [];var keyMap_id = this.keyMap.id;var keyMap_value = this.keyMap.value;for(var i=0; i<targetArr.length; i++){var tempObj = {}; tempObj[keyMap_id] = targetArr[i][this.keyMap.id];tempObj[keyMap_value] = targetArr[i][this.keyMap.value];tempArr.push(tempObj);  }return tempArr;},initCascade: function(){var _this = this;_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));if(_this.initPosition.length>0){_this.initDeepCount = 0;_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]);}else{_this.checkArrDeep(_this.cascadeJsonData[0]);}_this.reRenderWheels();},initCheckArrDeep: function (parent) {var _this = this;if(parent){if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); _this.initDeepCount++;var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]];if(nextNode){_this.initCheckArrDeep(nextNode);}else{_this.checkArrDeep(parent[_this.keyMap.childs][0]);}}}},checkArrDeep: function (parent) { //检测子节点深度  修改 displayJsonvar _this = this;if(parent){if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); //生成子节点数组_this.checkArrDeep(parent[_this.keyMap.childs][0]);//检测下一个子节点}}},checkRange: function(index, posIndexArr){var _this = this;var deleteNum = _this.displayJson.length-1-index;for(var i=0; i<deleteNum; i++){_this.displayJson.pop(); //修改 displayJson}var resultNode;for (var i = 0; i <= index; i++){if (i == 0)resultNode = _this.cascadeJsonData[posIndexArr[0]];else {resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]];}}_this.checkArrDeep(resultNode);//console.log(_this.displayJson);_this.reRenderWheels();_this.fixRowStyle();_this.setCurDistance(_this.resetPostion(index, posIndexArr));// $('.wheels').eq(0).attr("style","color:yellow !important")// $('.wheels').eq(1).attr("style","color:yellow !important")var tempValue ='',tempIdValue ='';for(var i=0; i<_this.wheel.length; i++){i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;i==_this.wheel.length-1 ? tempIdValue = _this.getDataId(i) : '';}var ddd=tempValue.split("-")//console.log(ddd)$('.wheels').eq(0).find('li').attr("style","color:#000 !important")$('.wheels').eq(1).find('li').attr("style","color:#000 !important")var s1=$(".wheels").find(".selectContainer")[0];var s2=$(".wheels").find(".selectContainer")[1];var s3=$(".wheels").find(".selectContainer")[2];$(s1).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[0]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})$(s2).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[1]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})$(s3).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[2]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})var s4=$(".wheels").eq(1).find(".selectContainer")[0];var s5=$(".wheels").eq(1).find(".selectContainer")[1];var s6=$(".wheels").eq(1).find(".selectContainer")[2];$(s4).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[0]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})$(s5).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[1]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})$(s6).find("li").each(function(){var s=$(this)[0];if($(s).text()==ddd[2]){$(s).attr("style","color:red")}//  alert($(resultNode).attr("id"))})},resetPostion: function(index, posIndexArr){var _this = this;var tempPosArr = posIndexArr;var tempCount;if(_this.slider.length > posIndexArr.length){ tempCount = _this.slider.length - posIndexArr.length;for(var i=0; i<tempCount; i++){  tempPosArr.push(0);}}else if(_this.slider.length < posIndexArr.length){tempCount = posIndexArr.length - _this.slider.length;for(var i=0; i<tempCount; i++){tempPosArr.pop();}  }for(var i=index+1; i< tempPosArr.length; i++){tempPosArr[i] = 0;} return tempPosArr;},reRenderWheels: function(){var _this = this;//删除多余的wheelif(_this.wheel.length > _this.displayJson.length){var count = _this.wheel.length - _this.displayJson.length;for(var i=0; i<count; i++){_this.wheels.removeChild(_this.wheel[_this.wheel.length-1]);}}for(var i=0; i<_this.displayJson.length; i++){ //列(function (i) {var tempHTML='';if(_this.wheel[i]){//console.log('插入Li');for(var j=0; j<_this.displayJson[i].length; j++){ //行tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';}_this.slider[i].innerHTML = tempHTML;}else{var tempWheel = document.createElement("div");tempWheel.className = "wheel";tempHTML = '<ul class="selectContainer">';for(var j=0; j<_this.displayJson[i].length; j++){ //行tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';}tempHTML += '</ul>';tempWheel.innerHTML = tempHTML;_this.addListenerWheel(tempWheel, i);_this.wheels.appendChild(tempWheel); }_this.addListenerLi(i);})(i);}},updateWheels:function(data){var _this = this;if(_this.cascade){_this.cascadeJsonData = data;_this.displayJson = [];_this.initCascade();if(_this.initPosition.length < _this.slider.length){var diff = _this.slider.length - _this.initPosition.length;for(var i=0; i<diff; i++){_this.initPosition.push(0);}}_this.setCurDistance(_this.initPosition);_this.fixRowStyle();}},updateWheel: function(sliderIndex, data){var _this = this;var tempHTML='';if(_this.cascade){console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源');return false;}else if(_this.jsonType){for(var j=0; j<data.length; j++){tempHTML += '<li data-id="'+data[j][_this.keyMap.id]+'">'+data[j][_this.keyMap.value]+'</li>';}_this.wheelsData[sliderIndex] = {data: data};}else{for(var j=0; j<data.length; j++){tempHTML += '<li>'+data[j]+'</li>';}_this.wheelsData[sliderIndex] = data;}_this.slider[sliderIndex].innerHTML = tempHTML;_this.addListenerLi(sliderIndex);},fixRowStyle: function(){var _this = this;var width = (100/_this.wheel.length).toFixed(2);for(var i=0; i<_this.wheel.length; i++){_this.wheel[i].style.width = width+'%';}},getIndex: function(distance){return Math.round((2*this.liHeight-distance)/this.liHeight);},getIndexArr: function(){var _this = this;var temp = [];for(var i=0; i<_this.curDistance.length; i++){temp.push(_this.getIndex(_this.curDistance[i]));}return temp;},getValue: function(){var _this = this;var temp = [];var positionArr = _this.getIndexArr();if(_this.cascade){for(var i=0; i<_this.wheel.length; i++){temp.push(_this.displayJson[i][positionArr[i]]);}}else if(_this.jsonType){for(var i=0; i<_this.curDistance.length; i++){temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]);}}else{for(var i=0; i<_this.curDistance.length; i++){temp.push(_this.getInnerHtml(i));}}return temp;},calcDistance: function(index){return 2*this.liHeight-index*this.liHeight;},setCurDistance: function(indexArr){var _this = this;var temp = [];for(var i=0; i<_this.slider.length; i++){temp.push(_this.calcDistance(indexArr[i]));_this.movePosition(_this.slider[i],temp[i]);}_this.curDistance = temp;},fixPosition: function(distance){return -(this.getIndex(distance)-2)*this.liHeight;},movePosition: function(theSlider, distance){theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)';},locatePostion: function(index, posIndex){this.curDistance[index] = this.calcDistance(posIndex);this.movePosition(this.slider[index],this.curDistance[index]);},updateCurDistance: function(theSlider, index){this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]);},getDistance:function(theSlider){return parseInt(theSlider.style.transform.split(',')[1]);},getInnerHtml: function(sliderIndex){var _this = this;var index = _this.getIndex(_this.curDistance[sliderIndex]);return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML;},getDataId: function(sliderIndex){var _this = this;var index = _this.getIndex(_this.curDistance[sliderIndex]);// console.log(index)return _this.slider[sliderIndex].getElementsByTagName('li')[index].dataset.id;},touch: function(event, theSlider, index){var _this = this;event = event || window.event;switch(event.type){case "touchstart":_this.startY = event.touches[0].clientY;_this.oldMoveY = _this.startY;break;case "touchend":_this.moveEndY = event.changedTouches[0].clientY;_this.offsetSum = _this.moveEndY - _this.startY;//修正位置_this.updateCurDistance(theSlider, index);_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);_this.movePosition(theSlider, _this.curDistance[index]);_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight; //反弹if(_this.curDistance[index] + _this.offsetSum > 2*_this.liHeight){_this.curDistance[index] = 2*_this.liHeight;setTimeout(function(){_this.movePosition(theSlider, _this.curDistance[index]);}, 100);}else if(_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder){_this.curDistance[index] = _this.oversizeBorder;setTimeout(function(){_this.movePosition(theSlider, _this.curDistance[index]);}, 100);}_this.transitionEnd(_this.getIndexArr(),_this.getValue());if(_this.cascade){var tempPosArr = _this.getIndexArr();tempPosArr[index] = _this.getIndex(_this.curDistance[index]);_this.checkRange(index, tempPosArr);}break;case "touchmove":event.preventDefault();_this.moveY = event.touches[0].clientY;_this.offset = _this.moveY - _this.oldMoveY;_this.updateCurDistance(theSlider, index);_this.curDistance[index] = _this.curDistance[index] + _this.offset;_this.movePosition(theSlider, _this.curDistance[index]);_this.oldMoveY = _this.moveY;break;}},dragClick: function(event, theSlider, index){var _this = this;event = event || window.event;switch(event.type){case "mousedown":_this.startY = event.clientY;_this.oldMoveY = _this.startY;_this.clickStatus = true;break;case "mouseup":_this.moveEndY = event.clientY;_this.offsetSum = _this.moveEndY - _this.startY;//修正位置_this.updateCurDistance(theSlider, index);_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);_this.movePosition(theSlider, _this.curDistance[index]);_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight; //反弹if(_this.curDistance[index] + _this.offsetSum > 2*_this.liHeight){_this.curDistance[index] = 2*_this.liHeight;setTimeout(function(){_this.movePosition(theSlider, _this.curDistance[index]);}, 100);}else if(_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder){_this.curDistance[index] = _this.oversizeBorder;setTimeout(function(){_this.movePosition(theSlider, _this.curDistance[index]);}, 100);}_this.clickStatus = false;_this.transitionEnd(_this.getIndexArr(),_this.getValue());if(_this.cascade){var tempPosArr = _this.getIndexArr();tempPosArr[index] = _this.getIndex(_this.curDistance[index]);_this.checkRange(index, tempPosArr);}break;case "mousemove":event.preventDefault();if(_this.clickStatus){_this.moveY = event.clientY;_this.offset = _this.moveY - _this.oldMoveY;_this.updateCurDistance(theSlider, index);_this.curDistance[index] = _this.curDistance[index] + _this.offset;_this.movePosition(theSlider, _this.curDistance[index]);_this.oldMoveY = _this.moveY;}break;}},singleClick: function(theLi, index, sliderIndex){var _this = this;if(_this.cascade){var tempPosArr = _this.getIndexArr();tempPosArr[sliderIndex] = index;_this.checkRange(sliderIndex, tempPosArr);}else{_this.curDistance[sliderIndex] = (2-index)*_this.liHeight;_this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]);}}};if (typeof exports == "object") {module.exports = MobileSelect;} else if (typeof define == "function" && define.amd) {define([], function () {return MobileSelect;})} else {window.MobileSelect = MobileSelect;}
})();

前端jquery日期插件相关推荐

jQuery日期插件
1.下载jQuery日期插件,见附件. 2.导入相应的js文件和jquery源码.例如 <link rel="stylesheet" type="text/css& ...
java前端的日期插件_几个前端时间插件总结
几个前端时间插件总结总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...
html分页插件大全,前端jquery分页插件推荐
很久没更新文章了,最近项目需要使用前端来做分页,于是找了一款现有的jquery分页插件进行修改了一下,增加了些新功能以及加大了兼容性,其本质其实就是使用$.ajax()方法进行包装,把修改过后的代码贴 ...
JQuery日期插件datepicker的使用
JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活.下面做一个使用日期插件datapicker的例子. 1.下载jQuery核心文件就不用说了吧,datepicker是 ...
精确到秒的JQuery日期控件，jquery日历插件，jquery日期插件
2019独角兽企业重金招聘Python工程师标准>>> 效果图如下: 首先在页面中引用一下库: <link type="text/css" href=&qu ...
jquery日期插件_AngularJS 日期时间选择组件（附详细使用方法）
插件简介 AngularJS是一款目前非常火的JavaScript脚本库,应用范围十分广阔.今天给大家分享一款基于AngularJS和jQuery的日期时间选择组件,和别的日期选择插件一样,它同样支持 ...
一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址: http://keleyi.com/a/bjad/e ...
html中字段是日期控件,jQuery日历插件datepicker用法详解
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端, ...
php html5日期插件,基于jQuery和HTML5的日历时钟插件的图文详解
jQuery是一个当前依然非常流行的Web前端JavaScript框架,这次我们要分享的就是基于jQuery的日历时钟插件,部分日历插件还是基于HTML5技术实现的,因此动画效果都还不错.有兴趣的朋友 ...

前端jquery日期插件

前端jquery日期插件相关推荐

最新文章

热门文章