bootstrap-datepicker插件的用法

       在这里我用到的是bootstrap-datepicker.js，下载地址 http://www.eyecon.ro/bootstrap-datepicker；

相信很多人都用过datepicker，但是有时候我们的产品总是会有各种要求，让你不得不去改变他的一些

样式和用法，下面有一些我做过的需求，分享给大家。

1：英文版的月份我们业务人员看不懂，你给改个中文版本的吧。

答：我当时听到这句话内心是崩溃的，难道我们的业务是小学生吗！！？what zhe f******，算了，赚钱要紧，改吧。

于是我找到了源码的第1166行-1175行，将原来的代码换成：

var dates = $.fn.datepicker.dates = {
        en: {
            days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
            daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            today: "Today",
            clear: "Clear"
        }
    };

于是就换成了中文版的了，哈哈哈，我真是人才。于是我们的产品又提出了新需求：

2：大哥（你以为产品会喊程序员大哥？yy一下不行吗~~），我们对账的东西，一开始只看月份，麻烦你能不能直接是

看月份，而不是只看日期？

对于这种合理的要求，我当然是义不容辞的更改。那么大家都知道，插件默认的是选择日期，怎么变为选择月份呢？

废话不多说，上代码：

$('#id').datepicker({
        format: 'yyyy-mm',
        minViewMode: 1,
        startView: 1
            });

在这里，只要给对应的input加个id，在js里写上这句代码就可以了。为什么可以了呢？因为这个minViewMode的作用，

minViewMode是1是选择月份，是0的话是日期，所以闭着眼猜也知道2是选择年份。当然还有很多默认的参数可以设置，

1139行到1158行：var defaults = $.fn.datepicker.defaults = {
        autoclose: false,
        beforeShowDay: $.noop,
        calendarWeeks: false,
        clearBtn: false,
        daysOfWeekDisabled: [],
        endDate: Infinity,
        forceParse: true,
        format: 'mm/dd/yyyy',
        keyboardNavigation: true,
        language: 'en',
        minViewMode: 0,
        orientation: "auto",
        rtl: false,
        startDate: -Infinity,
        startView: 0,
        todayBtn: false,
        todayHighlight: false,
        weekStart: 0
    };

　　听古人说，这里很多都可以设置，大家有兴趣可以自己试试。

　　这里给id去设置有个好处，就是不同的这个设置只影响当前的input，对于其他的input不影响，你要是都想选月份，

那么就把上面默认的minViewMode改为1就行了。

　　然而你以为这就完事了？no，no，no！新问题出来了，选好月份之后，为什么弹出的选框不消失呢？？？？？？？

      当测试人员发现的时候，我说你点一下其他地方就消失了，并且软磨硬泡，死皮赖脸的请求测试人员能放过我，

测试人员很给面子，反正不是什么大事，就过去了（呸！起床了，别做梦了），我是那种默默祈祷测试人员不会发现我的

bug而提心吊胆的人吗？我是这种不负责任的人吗？很显然就是（cry。。。。。）。

那么为了社会主义的建设（工资）怎么改呢？我看了半天源码，发现原来是写插件的那哥们没写好，在这里我请求投诉他。

源码782行-793行,：case 'span':
                        if (!target.is('.disabled')) {
                            this.viewDate.setUTCDate(1);
                            if (target.is('.month')) {
                                var day = 1;
                                var month = target.parent().find('span').index(target);
                                var year = this.viewDate.getUTCFullYear();
                                this.viewDate.setUTCMonth(month);
                                this._trigger('changeMonth', this.viewDate);
                                if (this.o.minViewMode === 1) {
                                    this._setDate(UTCDate(year, month, day,0,0,0,0));
                                }

这一段是写点击月份的时候发生的事，不信的可以f12看一看月份是不是span，还有就是看代码里minViewMode===1可以

证明（我为什么怕你们不信呢？不知道，习惯吧~~~~~），大家看到那个判断等于1的了吧，是不是少了点什么？就是隐藏

选框，那么怎么隐藏呢？我们记得点击日期的时候会隐藏弹框，我们把那么复制过来不就行了吗？哈哈哈，简直完美，于是

我立马就去复制过来：   this.hide()，放到 this._setDate(UTCDate(year, month, day,0,0,0,0));后面就行了，就这么简单，轻

松搞定。

3：我想限制一下起始日期和结束日期，起始日期不能小于结束日期。。。

这也许是我们产品提出的较为简单的问题了，好吧，分享一下写法:

<input type="text" ng-model="queryParam.startDate"  class="form-control datepicker" data-format="yyyy-mm-dd" name="startDate"  data-enddate="queryParam.endDate"  />

<input type="text" ng-model="queryParam.endDate" class="form-control datepicker" data-format="yyyy-mm-dd" name="endDate"  data-startdate="queryParam.startDate"  />

在这里我用的是angular，其实用啥都一样，主要是data-enddate写结束日期，data-startdate写开始日期，就完事了。

好啦，就分享到这里，希望能帮助到大家。