移动端日历选择插件

最新推荐文章于 2024-08-08 08:28:34 发布

M_SSY

最新推荐文章于 2024-08-08 08:28:34 发布

阅读量3k

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/m_ssy/article/details/80569409

版权

jQuery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手势拖动选择日期-移动端</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="mobileSelect.css"/>
    <script src="../jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="mobileSelect.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        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;
        }
    </style>
</head>
<body>
<h2 style="text-align: center;margin: 25px 0;">选择日期插件</h2>
<ul class="list">
    <li id="select_1">选择日期-设置全部参数</li>
    <li id="select_2">选择日期-默认全部参数</li>
    <li id="select_3">选择日期-设置默认选择</li>
    <li id="select_4">选择日期-设置日期区间</li>
</ul>
<script src="selectDate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    /*设置全部参数*/
    $.selectDate("#select_1",{
        start:1994,
        end:2018,
        select:[2012,5,6],
        title:'这个选择器很秀'
    },function (data) {
        console.log(data);
    });
    /*默认全部参数*/
    $.selectDate("#select_2",{},function (data) {
        alert(data.year+"-"+data.month+"-"+data.day);
        console.log(data);
    });
    /*设置默认选择*/
    $.selectDate("#select_3",{
        select:[2012,5,6]
    },function (data) {
        console.log(data);
    });
    /*设置日期区间*/
    $.selectDate("#select_4",{
        start:1994,
        end:2018
    },function (data) {
        console.log(data);
    });
</script>
</body>
</html>

mobileSelect.js:

/*!
 * mobileSelect.js
 * (c) 2017-present onlyhom
 * Released under the MIT License.
 */

window.MobileSelect = (function() {

	function getClass(dom,string) {
		return dom.getElementsByClassName(string);
	}

	//构造器
	function MobileSelect(config) {
		this.mobileSelect;
		this.wheelsData = config.wheels;
		this.jsonType =  false;
		this.jsonData = [];
		this.checkDataType();
		this.renderWheels(this.wheelsData);
		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.init(config);
	}
	
	MobileSelect.prototype = {
		constructor: MobileSelect,
		init: function(config){
			var _this = this; 

			_this.trigger = document.querySelector(config.trigger);
			_this.wheel = getClass(_this.mobileSelect,'wheel');   //wheel 数组
			_this.slider = getClass(_this.mobileSelect,'selectContainer'); // slider 数组
			_this.wheels = _this.mobileSelect.querySelector('.wheels');   //wheels
			_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;
			_this.ensureBtn = _this.mobileSelect.querySelector('.ensure');
			_this.closeBtn = _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.trigger.style.cursor='pointer';
			_this.setTitle(_this.titleText);
			_this.checkCascade();

			if (_this.cascade) {
				_this.initCascade();
			}

			//定位 初始位置
			if(_this.initPosition.length == 0){
				for(var i=0; i<_this.slider.length; i++){
					_this.initPosition.push(0);
				}
			}

			_this.setCurDistance(_this.initPosition);
			_this.addListenerAll();

			//按钮监听
			_this.closeBtn.addEventListener('click',function(){
			_this.mobileSelect.classList.remove('mobileSelect-show');
		    });

		    _this.ensureBtn.addEventListener('click',function(){
			_this.mobileSelect.classList.remove('mobileSelect-show');
			var tempValue ='';
		    	for(var i=0; i<_this.wheel.length; i++){
		    		i==_this.wheel.length-1 ? tempValue += _this.getValue(i) : tempValue += _this.getValue(i)+' ';
		    	}
		    	_this.trigger.innerHTML = tempValue;
		    	_this.callback(_this.getIndexArr(),_this.getJson());
		    });

		    _this.trigger.addEventListener('click',function(){
		    	_this.mobileSelect.classList.add('mobileSelect-show');
		    });
		    _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;
		},

		renderWheels: function(wheelsData){
			var _this = this;
			_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">取消</div>'+
		                    '<div class="title"></div>'+
		                    '<div class="ensure">确定</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].id+'">'+wheelsData[i].data[j].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);

			//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;
				_this.jsonData = _this.wheelsData[0].data;
			}
		},

		checkCascade: function(){
			var _this = this;
			if(_this.jsonType){ 
				var node = _this.wheelsData[0].data;
				for(var i=0; i<node.length; i++){
					if('childs' in node[i] && node[i].childs.length > 0){
						_this.cascade = true;
						break;
					}
				}
			}else{
				_this.cascade = false;
			}
		},

		initCascade: function(){
			var _this = this;
			_this.displayJson.push(_this.generateArrData(_this.jsonData));
			_this.checkArrDeep(_this.jsonData[0]);
			//console.log('将要显示的json:'); 
			//console.log(_this.displayJson);
			_this.updateWheels();
		},

		generateArrData: function (targetArr) {
			var tempArr = [];
			for(var i=0; i<targetArr.length; i++){
				tempArr.push({
					"id": targetArr[i].id,
					"value": targetArr[i].value
				});	
			}
			return tempArr;
		},

		checkArrDeep: function (parent) { //检测子节点深度  修改 displayJson
			var _this = this;
			if ('childs' in parent && parent.childs.length > 0) {
				_this.displayJson.push(_this.generateArrData(parent.childs)) ; //生成子节点数组
				_this.checkArrDeep(parent.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.jsonData[posIndexArr[0]];
				else {
					resultNode = resultNode.childs[posIndexArr[i]];
				}
			}
			_this.checkArrDeep(resultNode);
			//console.log(_this.displayJson);
			_this.updateWheels();
			_this.fixRowStyle();
			_this.setCurDistance(_this.resetPostion(index, posIndexArr));
		},

		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;
		},

		updateWheels: function(){
			var _this = this;
			//删除多余的wheel
			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]){
						//console.log('插入Li');
						for(var j=0; j<_this.displayJson[i].length; j++){ //行
							tempHTML += '<li data-id="'+_this.displayJson[i][j].id+'">'+_this.displayJson[i][j].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].id+'">'+_this.displayJson[i][j].value+'</li>';
						}
						tempHTML += '</ul>';
						tempWheel.innerHTML = tempHTML;

						_this.addListenerWheel(tempWheel, i);
				    	_this.wheels.appendChild(tempWheel); 
					}
					_this.addListenerLi(i);
				})(i);
			}
		},

		updateWheel: function(sliderIndex, data){
			var _this = this;
			var tempHTML='';
			for(var j=0; j<data.length; j++){
				tempHTML += '<li>'+data[j]+'</li>'
			}
			_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;
	    },

	    getJson: 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.getValue(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]);
	    },

	    getValue: 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.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.getJson());

			        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.getJson());
			        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]);
	        }
	    }

	};

	return MobileSelect;
})();

mobileSelect.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;
}

selectDate.js

/**
 * Created by helang.love@qq.com on 2018/3/11.
 */

$.extend({
    selectDate: function(g, a, k) {
        var d, e, b;
        b = new Date;
        !a.start || !a.end || a.end < a.start ? (d = b.getFullYear() - 60, e = b.getFullYear()) : (d = a.start, e = a.end);
        b = a.select && 3 == a.select.length ? [a.select[0] - d, a.select[1] - 1, a.select[2] - 1] : [e - d, b.getMonth(), b.getDate() - 1];
        new MobileSelect({
            trigger: g,
            title: a.title || "\u624b\u52bf\u62d6\u52a8\u9009\u62e9\u65e5\u671f",
            wheels: function(a, b) {
                for (var d = [{
                        data: []
                    }]; a <= b; a++) {
                    for (var e = {
                            id: a,
                            value: a + "\u5e74",
                            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,
                            value: f + "\u65e5"
                        });
                        e.childs.push({
                            id: c,
                            value: c + "\u6708",
                            childs: h
                        })
                    }
                    d[0].data.push(e)
                }
                return d
            }(d, e),
            position: b,
            callback: function(a, b) {
                k({
                    year: b[0].id,
                    month: b[1].id,
                    day: b[2].id
                })
            }
        })
    }
});