这次开始的项目是PC版的，貌似有2年没正儿八经的折腾PC端了。
言归正传，这次功能中有个选择日期段的功能，本来不麻烦的事情，但是PM非要参照另外一个网站的效果来做，把别人代码扒下来一看，我去，08年的插件，很多功能不能满足当前，PM非要那效果，时间又TM有限，就又找了个国外的插件daterangepicker，基于bootstrap，跟需求长得很像，功能非常强大，需求都能满足，但是...但是，PM和测试说不好用。。。折腾了半天源代码，优化了下，时间来不及只能凑合用着。
重新动手写了个。依赖jquery和moment.js(主要处理日期，如果自己处理也可以不需要)，
先看效果图
使用方法：
var daterangepicker = new DateRangePicker(); daterangepicker.init({ "ele": $("#daterange"), "pos":"left", "min_date": "1990-01-01", "format": "YYYY:MM:DD", "updateDateFn":function(){ console.log(daterangepicker.getDate()) } });
基本思路是：
创建一个日期选择构造函数
function DateRangePicker() { this.start_picker = null; this.end_picker = null; }
初始化日期构造函数，日期段由两个单独的日期选择组成，当起始日期和结束日期变化时要调用构造函数的updateDate方法，通知日期发生了变化。
DateRangePicker.prototype.init = function(opts) { var self = this; this.opts = $.extend({ "pos":"left",//日历位置，靠左或靠右 "min_date":"1970-01-01",//最小日期 "updateDateFn":function(){//日期更新回调 } }, opts || {}); this.createCalendarWrap(); this.$wrap=this.opts.ele.parents(".ui-datepicker"); this.start_picker = new DatePicker();//起始日期日历 this.end_picker = new DatePicker();//结束日期日历 this.start_picker.init({ "container": this.$wrap.find(".calendar-container"), "min_date":self.opts.min_date, "yearOffset": 20, "updateCallback": function(){ self.updateDate(); } }); this.end_picker.init({ "container": this.$wrap.find(".calendar-container2"), "yearOffset": 20, "min_date":self.opts.min_date, "updateCallback": function(){ self.updateDate(); } }); this.bindEvent(); };
处理日期发生变化的情况，比如起始日期大于结束日期，要进行互换。
DateRangePicker.prototype.updateDate = function() { var self = this; var start_date = moment(self.start_picker.currentDate).format(self.opts.format); var end_date = moment(self.end_picker.currentDate).format(self.opts.format); var start_date_time=new Date(self.start_picker.currentDate).getTime(); var end_date_time=new Date(self.end_picker.currentDate).getTime(); if(start_date_time>new Date().getTime()){ self.start_picker.setCurrentDate(new Date()); } if(end_date_time>new Date().getTime()){ self.end_picker.setCurrentDate(new Date()); } if(start_date_time>end_date_time){ self.opts.ele.val(end_date + "~" + start_date); }else{ self.opts.ele.val(start_date + "~" + end_date); } $(".ui-daterangepicker-range li").removeClass("active"); self.opts.updateDateFn.call(null,this.getDate());//日期更新后重新获取当前的起始和结束日期 };
获取起始和结束日期
//获取起始日期和结束日期段,起始日期若大于结束日期则互换 DateRangePicker.prototype.getDate = function() { var start_date=Math.min(this.start_picker.currentDate.getTime(),this.end_picker.currentDate.getTime()); var end_date=Math.max(this.start_picker.currentDate.getTime(),this.end_picker.currentDate.getTime()); start_date=moment(start_date).format(this.opts.format); end_date=moment(end_date).format(this.opts.format); return { "start_date":start_date, "end_date": end_date }; };
提供动态设置当前起始日期和结束日期的方法
//设置起始日期和结束日期 DateRangePicker.prototype.setDate = function(start_date, end_date) { this.start_picker.setCurrentDate(new Date(start_date)); this.end_picker.setCurrentDate(new Date(end_date)); this.updateDate(); };
创建一个容器，因为日期选择要刚好在日期文本框下面，在日期文本框外面包一层方便定位。
//创建日期段容器 DateRangePicker.prototype.createCalendarWrap = function() { var $parent=this.opts.ele.parents(".ui-datepicker"); var h=$parent.height(),w=$parent.width(); var wrap = '<div><div><p>开始日期</p><div></div></div>' + '<div><p>结束日期</p><div></div></div>' + '<div><ul>' + '<li range-key="今日">今日</li>' + '<li range-key="昨日">昨日</li>' + '<li range-key="最近7日">最近7日</li>' + '<li range-key="最近30日">最近30日</li>' + '</ul>' + '</div></div>'; $parent.append(wrap); };
接下来是单个日期选择的处理
定义构造函数和初始化