传入起始年份和起始月份
得到
插件的标准格式放到
效果
let getAllDatas = (stime, etime) => { //接收传进来的参数月份 var data_M = etime; //接收传进来的参数年份 var data_Y = stime; //每年总月数 var countM = 12; //在MobileSelect时间插件使用的格式data：{} var data = []; //写死一个满月份的数组 var ourM = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']; var datas = null; var data_list = []; //处理每个月份 var every_m = []; //定义key var keys = ''; //当前年 var nowYear = new Date().getFullYear(); //当前月 var nowDay = new Date().getMonth() + 1; if (stime >= nowYear) { console.log('输入有错，不准大于当前年份') return } if (etime > countM) { console.log('输入有错，每年只有12个月') return } //先处理第一个月份 every_m.push(etime + '') for (let j = 0; j < countM - data_M; j++) { etime += 1; every_m.push(etime + '') } //=---处理 年份key：数据 every_m月份的数组 keys = stime + ''; datas = { [keys]: every_m }; data_list.push(datas) console.log(nowYear) if (nowYear - stime >= 2) { var cha = nowYear - stime; for (let i = 1; i < cha; i++) { data_Y += 1; keys = data_Y + ''; datas = { [keys]: ourM }; data_list.push(datas) } } every_m = [] //处理当前的年份和月份 for (let k = 1; k <= nowDay; k++) { every_m.push(k + '') } keys = new Date().getFullYear() + ''; datas = { [keys]: every_m }; data_list.push(datas) console.log(data_list) //数据格式封装完毕 封装//在MobileSelect时间插件使用 for (var t = 0; t < data_list.length; t++) { var newJson = {}; var child = []; for (var key in data_list[t]) { for (var v = 0; v < data_list[t][key].length; v++) { child.push({ id: data_list[t][key][v], value: data_list[t][key][v] }) } newJson = { id: key, value: key, childs: child } } data.push(newJson) } console.log(data) return data; }
插件源码
/*! * mobileSelect.js * (c) 2017-present onlyhom * Released under the MIT License. */ (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.curValue = null; this.curIndexArr = []; 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 || function() {}; _this.transitionEnd = config.transitionEnd || function() {}; _this.onShow = config.onShow || function() {}; _this.onHide = config.onHide || function() {}; _this.initPosition = config.position || []; _this.titleText = config.title || ""; _this.connector = config.connector || " "; _this.triggerDisplayData = !(typeof(config.triggerDisplayData) == "undefined") ? config.triggerDisplayData : true; _this.trigger.style.cursor = "pointer"; _this.setStyle(config); _this.setTitle(_this.titleText); _this.checkIsPC(); _this.checkCascade(); _this.addListenerAll(); 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.cancelBtn.addEventListener("click", function() { _this.hide() }); _this.ensureBtn.addEventListener("click", function() { _this.hide(); if (!_this.liHeight) { _this.liHeight = _this.mobileSelect.querySelector("li").offsetHeight } var tempValue = ""; for (var i = 0; i < _this.wheel.length; i++) { i == _this.wheel.length - 1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this .connector } if (_this.triggerDisplayData) { _this.trigger.innerHTML = tempValue } _this.curIndexArr = _this.getIndexArr(); _this.curValue = _this.getCurValue(); _this.callback(_this.curIndexArr, _this.curValue) }); _this.trigger.addEventListener("click", function() { _this.show() }); _this.grayLayer.addEventListener("click", function() { _this.hide() }); _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 + ")" } if (!isNaN(config.maskOpacity)) { _this.grayMask = _this.mobileSelect.querySelector(".grayLayer"); _this.grayMask.style.background = "rgba(0, 0, 0, " + config.maskOpacity + ")" } }, 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 ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) { _this.isPC = false } }, show: function() { this.mobileSelect.classList.add("mobileSelect-show"); if (typeof this.onShow === "function") { this.onShow(this) } }, hide: function() { this.mobileSelect.classList.remove("mobileSelect-show"); if (typeof this.onHide === "function") { this.onHide(this) } }, renderWheels: function(wheelsData, cancelBtnText, ensureBtnText) { var _this = this; var cancelText = cancelBtnText ? cancelBtnText : "{:w:sld_shop_cancel}"; var ensureText = ensureBtnText ? ensureBtnText : "{:w:sld_confirm2}"; _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"></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) })(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) { 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) } }, 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) { 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.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() } 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); _this.reRenderWheels(); _this.fixRowStyle(); _this.setCurDistance(_this.resetPosition(index, posIndexArr)) }, resetPosition: 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; if (_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]) { 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) } })(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 }, 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 }, getCurValue: 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 }, getValue: function() { return this.curValue }, 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)" }, locatePosition: function(index, posIndex) { var _this = this; this.curDistance[index] = this.calcDistance(posIndex); this.movePosition(this.slider[index], this.curDistance[index]); if (_this.cascade) { _this.checkRange(index, _this.getIndexArr()) } }, updateCurDistance: function(theSlider, index) { if (theSlider.style.transform) { this.curDistance[index] = parseInt(theSlider.style.transform.split(",")[1]) } else { this.curDistance[index] = parseInt(theSlider.style.webkitTransform.split(",")[1]) } }, getDistance: function(theSlider) { if (theSlider.style.transform) { return parseInt(theSlider.style.transform.split(",")[1]) } else { return parseInt(theSlider.style.webkitTransform.split(",")[1]) } }, getInnerHtml: function(sliderIndex) { var _this = this; var index = _this.getIndex(_this.curDistance[sliderIndex]); return _this.slider[sliderIndex].getElementsByTagName("li")[index].innerHTML }, touch: function(event, theSlider, index) { var _this = this; event = event || window.event; switch (event.type) { case "touchstart": _this.startY = event.touches[0].clientY; _this.startY = parseInt(_this.startY); _this.oldMoveY = _this.startY; break; case "touchend": _this.moveEndY = parseInt(event.changedTouches[0].clientY); _this.offsetSum = _this.moveEndY - _this.startY; _this.oversizeBorder = -(theSlider.getElementsByTagName("li").length - 3) * _this.liHeight; if (_this.offsetSum == 0) { var clickOffetNum = parseInt((document.documentElement.clientHeight - _this.moveEndY) / 40); if (clickOffetNum != 2) { var offset = clickOffetNum - 2; var newDistance = _this.curDistance[index] + (offset * _this.liHeight); if ((newDistance <= 2 * _this.liHeight) && (newDistance >= _this.oversizeBorder)) { _this.curDistance[index] = newDistance; _this.movePosition(theSlider, _this.curDistance[index]); _this.transitionEnd(_this.getIndexArr(), _this.getCurValue()) } } } else { _this.updateCurDistance(theSlider, index); _this.curDistance[index] = _this.fixPosition(_this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]); 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.getCurValue()) } if (_this.cascade) { _this.checkRange(index, _this.getIndexArr()) } 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.oversizeBorder = -(theSlider.getElementsByTagName("li").length - 3) * _this.liHeight; if (_this.offsetSum == 0) { var clickOffetNum = parseInt((document.documentElement.clientHeight - _this.moveEndY) / 40); if (clickOffetNum != 2) { var offset = clickOffetNum - 2; var newDistance = _this.curDistance[index] + (offset * _this.liHeight); if ((newDistance <= 2 * _this.liHeight) && (newDistance >= _this.oversizeBorder)) { _this.curDistance[index] = newDistance; _this.movePosition(theSlider, _this.curDistance[index]); _this.transitionEnd(_this.getIndexArr(), _this.getCurValue()) } } } else { _this.updateCurDistance(theSlider, index); _this.curDistance[index] = _this.fixPosition(_this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]); 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.getCurValue()) } _this.clickStatus = false; if (_this.cascade) { _this.checkRange(index, _this.getIndexArr()) } 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 } } }; if (typeof exports == "object") { module.exports = MobileSelect } else { if (typeof define == "function" && define.amd) { define([], function() { return MobileSelect }) } else { window.MobileSelect = MobileSelect } } })();