这次开始的项目是PC版的，貌似有2年没正儿八经的折腾PC端了。
言归正传，这次功能中有个选择日期段的功能，本来不麻烦的事情，但是PM非要参照另外一个网站的效果来做，把别人代码扒下来一看，我去，08年的插件，很多功能不能满足当前，PM非要那效果，时间又TM有限，就又找了个国外的插件daterangepicker，基于bootstrap，跟需求长得很像，功能非常强大，需求都能满足，但是...但是，PM和测试说不好用。。。折腾了半天源代码，优化了下，时间来不及只能凑合用着。
重新动手写了个。依赖jquery和moment.js(主要处理日期，如果自己处理也可以不需要)，
先看效果图
使用方法：
基本思路是：
创建一个日期选择构造函数
初始化日期构造函数，日期段由两个单独的日期选择组成，当起始日期和结束日期变化时要调用构造函数的updateDate方法，通知日期发生了变化。
处理日期发生变化的情况，比如起始日期大于结束日期，要进行互换。
获取起始和结束日期
提供动态设置当前起始日期和结束日期的方法
创建一个容器，因为日期选择要刚好在日期文本框下面，在日期文本框外面包一层方便定位。
接下来是单个日期选择的处理
定义构造函数和初始化
事件处理
定义临时存储的当前日期，默认日期是今天，但是选择的时候当前日期会变化。
年月下拉框变化时更新日期
渲染日历框架，日历固定为42格，7列6行，星期从一到天
渲染日历的头部，包括上月、下月按钮，年月的下拉框
js完整代码
//日期段由两个单独日期实例组成
function DateRangePicker() {
this.start_picker = null;
this.end_picker = null;
}
DateRangePicker.prototype.init = function(opts) {
var self = this;
this.opts = $.extend({
"pos":"left",//最小日期
"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"),"updateCallback": function(){
self.updateDate();
}
});
this.bindEvent();
};
DateRangePicker.prototype.bindEvent = function() {
var self = this;
var start_picker = self.start_picker,end_picker = self.end_picker;
this.opts.ele.on("focus",function(){
self.$wrap.find(".ui-daterangepicker-wrap").show();
});
$(".ui-daterangepicker-range").on("click","[range-key]",function() {
var _year = start_picker.currentDate.getFullYear();
var _month = start_picker.currentDate.getMonth();
var range = $(this).attr("range-key");
var start_day = start_picker.todayDate,end_day = end_picker.todayDate
switch (range) {
case "今日":
start_day = new Date(moment());
break;
case "昨日":
start_day = new Date(moment().subtract(1,'days'));
break;
case "最近7日":
start_day = new Date(moment().subtract(6,'days'));
break;
case "最近30日":
start_day = new Date(moment().subtract(30,'days'));
break;
}
self.setDate(start_day,new Date())
$(this).addClass("active").siblings("[range-key]").removeClass("active");
});
$("html").on("click",function(e){
var $target=$(e.target);
if($target.closest(".ui-daterangepicker-wrap").length==0&&$target[0]!=self.opts.ele[0]){
self.$wrap.find(".ui-daterangepicker-wrap").hide();
}
});
};
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());
};
//获取起始日期和结束日期段,"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 class="ui-daterangepicker-wrap" style="top:'+h+'px;'+this.opts.pos+':0"><div class="ui-calendar"><p class="calendar-title">开始日期
