js实现符合国情的日期插件详解

这次开始的项目是个人电脑版的，貌似有2年没正儿八经的折腾个人电脑端了。

言归正传，这次功能中有个选择日期段的功能，本来不麻烦的事情，但是首相非要参照另外一个网站的效果来做，把别人代码扒下来一看，我去，08年的插件，很多功能不能满足当前，下午非要那效果，时间又铥有限，就又找了个国外的插件日期范围选择器，基于自举，跟需求长得很像，功能非常强大，需求都能满足，但是.但是，下午和测试说不好用。折腾了半天源代码，优化了下，时间来不及只能凑合用着。

重新动手写了个。依赖jquery和moment.js(主要处理日期，如果自己处理也可以不需要),

先看效果图

使用方法：

var日期范围选取器=新日期范围选取器()；dateragepicker。init({ ' ele ' : $(' # daterage ')，' pos':'left '，' min_date': '1990-01-01 '，' format ' : ' yyyy :mm : DD '，' updateDateFn ' : function(){ console。日志(dateragepicker。getdate())})})；基本思路是：

创建一个日期选择构造函数

函数DateRangePicker(){ this。start _ Picker=nullthis.end _ picker=null}初始化日期构造函数，日期段由两个单独的日期选择组成，当起始日期和结束日期变化时要调用构造函数的更新日期方法，通知日期发生了变化。

dateragepicker。原型。init=function(opts){ var self=this；this.opts=$ .扩展({ 'pos':'left '，//日历位置，靠左或靠右min_date':'1970-01-01 '，//最小日期updateDateFn ' :函数(){//日期更新回调} }，opts | | { })；这个。createcalendarwrap()；这个$wrap=this.opts.ele.parents ' .ui-日期选择器’)；这个。start _ picker=new date picker()；//起始日期日历这个。end _ picker=new date picker()；//结束日期日历这个。start _ picker。init({ ' container ' : this .$wrap.find(' .日历容器')，' min _ date ' :自身。选择。min _ date，‘year offset’: 20，‘updateCallback’: function(){ self。update date()；} });这个。end _ picker。init({ ' container ' : this .$wrap.find(' .日历容器2 ')，' yearOffset': 20，' min _ date ' :自身。选择。min _ date，' updateCallback ' :函数(){ self。update date()；} });这个。bindEvent()；};处理日期发生变化的情况，比如起始日期大于结束日期，要进行互换。

dateragepicker。原型。update date=function(){ var self=this；var start _ date=moment(自我。start _ picker。当前日期).格式(自我。选择。格式)；var end _ date=moment(self。end _ picker。当前日期).格式(自我。选择。格式)；var start _ date _ time=新日期getTime()；var end _ date _ time=新日期(self.end_picker.currentDate).getTime()；if(start_date_timenew Date()