$(function(){ var html = '
' + '' + '
' + '自定义' + '
' + '
' + '
' + '
' + '
' + '
' + '
' + '
' + '开始于:
' + '' + '
' + '
' + '结束于:
' + '' + '
' + '
' + '
' + '
取消
' + '
确定
' + '
' + '
'; 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('
').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"); }; })