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个，百度不到解决方法的！写下这个留给须要人的吧！