基于datepicker的只选择年月的日期选择器

手头上的项目在开始做的时候，有那种需要用到日期选择的需求，本着快的原则，当时选择了datepicker这一款jqueryUI的插件，当然这个插件的质量相当不错，当时的需求是要完成一个有起止时间的选择，自己的实现也是通过改变datepicker的配置项来更新相应的限制，算起来，这都是自己刚工作的时候开发的东西，那时候自己的水平大概停留一下百度一下什么插件比较合适，做一个简单的封装之类的。

这两天还是这个日期选择，有一个新的需求，不要天的选择了，只要年、月。OMG，这是个什么鬼，但是没办法啊，产品说要做，关键自己也认同这个逻辑，那就做呗。本着最省劲的原则，那就还是拿datepicker，来做一个简单的改造，事实证明，我还是too young。

首先百度了一下，只显示年月的思路，大体的关键是，

1.设置dateForamt为："yy-mm"，//只显示年月

2.设置changeYear、changeMonth为true，//开启年、月对应的下拉框，用户选择起来更方便

3.设置onChangeMonthYear的回调函数，//年月发生改变之后，就可以获取当前选中的值，拿到这个值之后，设置输入框的值

4.页面上加一个style，将选择天的pane隐藏掉。

关键点非常的简单，但是里面的坑很大，慢慢跳。

当时只是大概试了一下，拿了一个输入框做了实验，觉得好像没问题，我就想之前已经有一个dateSelect的组件了，但是写的不太通用，基本上已经把很多东西都限定死了，那这一次，趁着这次实现的机会，重写一个通用性更高的组件，说干就干。

这种起止日期的组件的关键可能就是前后的限定了，开始的日期选定了之后，结束的日期的最小值不能小于开始时间的值，反过来，如果一上来结束的日期选定了之后，那么开始的日期就不能超过这个值。这个其实实现起来比较简单，大概就是每一个输入框绑定onSelect的回调，一旦选择了之后，把另一项的maxDate或者minDate的值设定成这个值就可以了。来看一下代码：

/**
 * date_selectCom_view.js
 * 通用的日期选择组件，可自定义定制，用于组合（一开始、一结束）com-common
 * 用法
    var chooseType = 0;//先选中的类型 1-start 2-end
    var dateSelect = $().dateSelectCom({
        start:{
            ele:$("#start"),
            options:{
                dateFormat:"yy-mm-dd",
                maxDate: new Date(),
                onSelect: function(value){
                    if(chooseType != 2){
                        dateSelect.setLimit(2, value);
                        chooseType = 1;
                    }
                }
            }
        },
        end:{
            ele:$("#end"),
            options:{
                dateFormat:"yy-mm-dd",
                maxDate: new Date(),
                onSelect: function(value){
                    if(chooseType != 1){
                        dateSelect.setLimit(1, null, value);
                        chooseType = 2;
                    }
                }
            }
        }
    });

    --重置
    dateSelect.reset();
    chooseType = 0;//这个也需要重置，要不然，会出问题
 */
(function(){
    /**
     * @param params{
            start:{
                options: ,
                ele:
            }, //开始的元素
            end:{
                options: ,
                ele:
            } //结束的元素
       }
     */
    var DateSelectCom = function(params){
        if(params && params.start.ele && params.end.ele){
            var options = {dateFormat: 'yy-mm-dd'}; 
            this.startEle = $(params.start.ele);
            this.startOptions = params.start.options;
            this.endEle = $(params.end.ele);
            this.endOptions = params.end.options;
            this.init();//初始化
        }
    };

    /**
     * 日期的处理，低版本的ie对Date对象的兼容较差
     */
    DateSelectCom.prototype.dateHandle = function(d){
        if(d){
            if(d.replace){
                var t;
                if(d.indexOf("-") >= 0 && d.split("-").length == 2){//-分割，并且只有年月，补上最后一位， 兼容IE
                    d += "-1";
                }
                else if(d.indexOf("/") >= 0 && d.split("/").length ==2){// /分割
                    d += "/1";
                }
                t = d.replace(/-/g,'/');
                return new Date(t);
            }
            return new Date(d);