sr-iHealthApp/html/manager/js/l-picker.js

$(function(){
	var html = 
		'<div id="datePick" class="l-time-sel-box">' +
			'<ul>' +
				'<li class="l-over">全部</li>' +
				'<li>最近一周</li>' +
				'<li>最近一月</li>' +
//				'<li>过去365天</li>' +
			'</ul>' +
			
			'<div class="l-time-sel-custom">' +
				'自定义' +
				'<div style="float: right; margin-top: .5rem;">' +
					'<div id="lpSwitch" class="mui-switch mui-switch-mini">' +
					  '<div class="mui-switch-handle"></div>' +
					'</div>' +
				'</div>' +
			'</div>' +
			
			'<div class="l-date-form">' +
				'<div class="l-date-start">' +
					'开始于:<br>' +
					'<input id="l-p-from" readonly="readonly" type="text" class="mui-input-clear" >' +
				'</div>' +
				
				'<div class="l-date-end">' +
					'结束于:<br>' +
					'<input id="l-p-to" readonly="readonly" type="text" class="mui-input-clear" >' +
				'</div>' +
				
			'</div>' +
			'<div class="l-btn-arr">' +
				'<div class="l-btn-cancel">取消</div>' +
				'<div class="l-btn-ok">确定</div>' +
			'</div>' + 
		'</div>';
	
	var options = {
		_el: undefined,
		mask: undefined,
		type: 1,              //类型 1选项，  2自定义
		onCheck: undefined,
		old: {type: 1, val: 0}               //就值， 用于还原
	};
	
	function Lpicker(){
		var g= this;
		g.options = {};
	}
	
	Lpicker.prototype.toggle = function(){
		var g=this, p=g.options;
		if(p.mask){
			g.close();
		}else
			g.show();
	}
	
	Lpicker.prototype.close = function(t){
		var g=this, p=g.options;
		p._el.hide();
		if(!t)
			p.mask.close();
		p.mask = undefined;
	}
	
	Lpicker.prototype.show = function(){
		var g=this, p=g.options;
//		if(!p.mask){
			p.mask = mui.createMask(function(){
				g.reset();
				g.close(1);
			});
			p.mask.show();
			p._el.show();
//		}
	}
	
	function getPreDate(pre){
		var c = new Date();
		c.setDate(c.getDate() - pre);
		return formatDate(c);
	}
	
	function formatDate(d){
		return d.getFullYear() + "-" + getMonth(d.getMonth()) + "-" + getDay(d.getDate());
	}
	
	Lpicker.prototype.getValue = function(){
		var g=this, p=g.options;
		var from, to;
		if(p.type == 1){
			var i =$('.l-time-sel-box li.l-over', p._el).index() + 1;
			switch(i){
				case 1: from = "";  break;
				case 2: from = getPreDate(6); break;
				case 3: from = getPreDate(29); break;
			}
			to = getPreDate(0);
			
		}
		else{
			from = $("#l-p-from").val();
			to = $("#l-p-to").val();
		}
		
		return {from: from, to: to};
	}
	
	Lpicker.prototype.getChecked = function(){
		var g=this, p=g.options;
		
		return $('.l-time-sel-box li.l-over', p._el).index();
	}
	
	/**
	 * 设值
	 * @param {Object} from 可是开始时间 或选择类型
	 * @param {Object} to
	 */
	Lpicker.prototype.setValue = function(from, to){
		var g=this, p=g.options;
		if(to){
			$('#lpSwitch').addClass('mui-active');
			mui('#lpSwitch')['switch']();
			g.selectCustom({from: from, to: to});
			p.old = {type: 2, val: {from: from, to: to}};
		} else {
			g.selectItem($('.l-time-sel-box li', p._el).eq(from));
			p.old = {type: 1, val: from};
		}
	}
	
	Lpicker.prototype.reset = function(){
		var g=this, p=g.options;
		var old = p.old;
		if(!old)
			return;
		if(old.type == 1){
			g.selectItem($('.l-time-sel-box li', p._el).eq(old.val));
		}else{
			$('#lpSwitch').empty().append('<div class="mui-switch-handle"></div>').addClass('mui-active');
			mui('#lpSwitch')['switch']();
			g.selectCustom(old.val);
//			$("#l-p-from").val(old.val.from);
//			$("#l-p-to").val(old.val.to);
		}
	}
	
	function isSwitchOpened(){
		return document.getElementById("lpSwitch").classList.contains("mui-active");
	}
	
	
	Lpicker.prototype.init = function(_el, opts){
		var g= this;
		var p = g.options = $.extend(true, options, opts);
		_el.hide();
		_el.append(html);
		
		//取消按钮
		$('.l-btn-cancel', p._el).on("tap", function(){
			g.close();
//			alert(1)
//			g.reset();
		})
		//确认按钮
		$('.l-btn-ok', p._el).on("tap", function(){
			p.old = {};
			p.old.type = p.type;
			if(p.type==1)
				p.old.val = $('.l-time-sel-box li.l-over', p._el).index();
			else
				p.old.val = g.getValue();
			g.close();
			if(p.onCheck) p.onCheck.call(g);
		})
		
		//选项点击事件
		var items = $('.l-time-sel-box li', p._el);
		items.on("tap", function(){
			g.selectItem($(this));
		})
		
		//自定义按钮
		document.getElementById("lpSwitch").addEventListener("toggle",function(event){
			
			if(event.detail.isActive){
				var tim = $('#lpSwitch').data('time');
				if(tim){
					$('#lpSwitch').removeData('time');
					g.selectCustom(tim);
				} else
					g.selectCustom();
			}else{
				$('.l-date-form', p._el).hide();
				if($('.l-time-sel-box li.l-over', p._el).length==0){
					p.type = 1;
					$('.l-time-sel-box li:first', p._el).addClass("l-over");
				}
			}
		})
		
		//开始日期
		$('#l-p-from').on("tap", function(){
			var self = $(this);
			var v = self.val().split('-');
			var dDate = new Date();
			dDate.setFullYear(parseInt(v[0]), parseInt(v[1]) - 1, parseInt(v[2]));
			
			var minDate = new Date();
			minDate.setFullYear(2016, 7, 1);
			
			var maxDate = new Date();
			var to = $('#l-p-to').val();
			if(to){
				to = to.split("-");
				maxDate.setFullYear(parseInt(to[0]), parseInt(to[1])-1, parseInt(to[2]));
			} else 
				maxDate.setDate(maxDate.getDate());
				
			
			
			plus.nativeUI.pickDate(function(e) {
				var d = e.date;
				self.val(formatDate(d));
			}, function(e) {
				
			}, {
				title: "请选择开始日期",
				date: dDate,
				minDate: minDate,
				maxDate: maxDate
			});
		})
		
		//结束日期
		$('#l-p-to').on("tap", function(){
			var self = $(this);
			var v = self.val().split('-');
			var dDate = new Date();
			dDate.setFullYear(parseInt(v[0]), parseInt(v[1]) - 1, parseInt(v[2]));
			
			var minDate = new Date();
			var from = $('#l-p-from').val();
			if(from){
				from = from.split("-");
				minDate.setFullYear(parseInt(from[0]), parseInt(from[1])-1, parseInt(from[2]));
			} else 
				minDate.setFullYear(1990, 0, 1);
				
			var maxDate = new Date();
			maxDate.setDate(maxDate.getDate());
			
			plus.nativeUI.pickDate(function(e) {
				var d = e.date;
				self.val(formatDate(d));
			}, function(e) {
				info.innerText = "您没有选择日期";
			}, {
				title: "请选择结束日期",
				date: dDate,
				minDate: minDate,
				maxDate: maxDate
			});
		})
	}
	
	Lpicker.prototype.selectItem = function(el){
		var g= this, p= g.options;
		p.type = 1;
		$('.l-time-sel-box li', p._el).removeClass("l-over");
		$(el).addClass("l-over");
		
		if(isSwitchOpened()){
		  mui("#lpSwitch").switch().toggle();
		}
	}
	
	Lpicker.prototype.selectCustom = function(v){
		var g= this, p= g.options;
		var v = v || g.getValue();
		if(v.from=='')
			v.from = getPreDate(6);
		p.type = 2;
		$('.l-time-sel-box li', p._el).removeClass("l-over");
		$('#l-p-from').val(v.from);
		$('#l-p-to').val(v.to);
		$('.l-date-form', p._el).show();
	}
	
	function getMonth(m){
		m++;
		if(m<10)
			return "0" + m.toString();
		return m.toString();
	}
	
	function getDay(m){
		if(m<10)
			return "0" + m.toString();
		return m.toString();
	}
	
	$.fn.lpicker = function (opts) {
		this.css("position", "fixed");
		this.css("width", "100%");
		this.css("z-index", "1000");
		this.css("top", "0");
		this.css("left", "0");
		opts = opts || {};
		opts._el = $(this);
		var o = new Lpicker();
		o.init(this, opts);
		this.data("Lpicker", o);
		return o;
    };
    
    $.fn.getLpicker = function () {
		return this.data("Lpicker");
    };
})