bootstrap-datetimepicker的功能優化

開空間第一個博客，送給bootstrap-datetimepicker吧！

最近項目中第一次使用了BS,仍是遇到很多問題和坑。我簡單說一下個人解決辦法。

引用：bootstrap 和 bootstrap-datetimepicker CSS文件

         Jquery bootstrap 和 bootstrap-datetimepicker datetimepicker .zh-CN等JS文件。

首先封裝一下本身的函數，直接能顯示年、年月、年月日，用起來順手。設置好起始和最小視圖。

$.fn.autoBSN = function (options) {
        var opt = {
            format: 'yyyy'
        }
        $.extend(opt, options);
        if (this.is('input[type=text]')) {
            this.datetimepicker({
                format: opt.format,
                weekStart: 1,
                autoclose: true,
                startView: 4,
                minView: 4,
                forceParse: false,  //必須設置，不然每次解析錯，會變成1899年。
                language: 'zh-CN'
            });
        }
        return this;
    };
    $.fn.autoBSNy = function (options) {
        var opt = {
            format: 'yyyymm'
        }
        $.extend(opt, options);
        if (this.is('input[type=text]')) {
            this.datetimepicker({
                format: opt.format,
                weekStart: 1,
                autoclose: true,
                startView: 3,
                minView: 3,
                forceParse: false,  //必須設置，不然每次解析錯，會變成1899年。
                language: 'zh-CN'
            });
        }
        return this;
    };
    $.fn.autoBSNyr = function (options) {
        var opt = {
            format: 'yyyy-mm-dd'
        }
        $.extend(opt, options);
        if (this.is('input[type=text]')) {
            this.datetimepicker({
                format: opt.format,
                weekStart: 1,
                autoclose: true,
                startView: 2,
                minView: 2,
                forceParse: false,
                language: 'zh-CN'
            });
        }
        return this;
    };

調用時，就簡單了：放一個<input type="text" value="201205" id="datetimepicker">元素

$('#datetimepicker2').autoBSN(); //年選擇

$('#datetimepicker').autoBSNy();//年月選擇

 $('#datetimepicker1').autoBSNyr();//年月日選擇

取值是：$('#datetimepicker1').data('date');

如下是各類填坑（其實就是我定製優化一些地方）

一、有時候顯示不出圖標，左右箭頭！

    緣由：datetimepicker支持Bootstrap2和3，它給渲染成bs2的模式了，由於我項目基於BS3.1.1。因此直接讓它按3渲染便可： 

原代碼：this.bootcssVer = this.isInput ? (this.element.is('.form-control') ? 3 : 2) : (this.bootcssVer。。。。。

修改成：this.bootcssVer = 3;  // 直接閹割，2個球球直接變爲1個球！

二、年月格式：yyyymm不識別的問題。

<input type="text" value="201205" id="datetimepicker"> $('#datetimepicker').autoBSNy();

代碼如上，現象描述：初始年月顯示201205，一旦選擇，就變爲1899年了。

緣由：老外可能不習慣201205這個格式，但我到處都是用這個格式的。做者解析原值時，代碼：

this.nonpunctuation=/[^ -\/:-@\[-`{-~\t\n\rTZ]+/g，

parts = date && date.match(this.nonpunctuation) || []; 

而正則表達式看不太懂，大概要求必須有 - ：等分割符。總之個人201205就分割不出來，運行後是['201205']

把代碼修改成：

var parts;
if (date.match(/\d{6}/g))
   parts = date.match(/(\d{4})|(\d{2})/g);
else
    parts = date && date.match(this.nonpunctuation) || [];

代碼好很差不知道，總之上面代碼解決了問題，仍是小有成就感！

三、年月視圖顯示四列三行，不符合1年四個季度，一個季度3個月的標準，修改成四行三列吧！

方法就是打開firebug等調試工具，把寬度變爲30%或33%，而後就是調height line-height，使面板變小一點。

代碼就不貼了！

以上是我遇到的一些坑，特別是第2個，百度不到解決方法的！寫下這個留給須要人的吧！