bootstrap-datetimepicker初学者经验

这款datetimepicker的确很好用，大部分内容还是参考这里：http://www.bootcss.com/p/bootstrap-datetimepicker/

但是在我的使用下仍旧发现了一些问题：

如果仅仅是照搬网站上的内容可能无法达到所需的要求，可能有的人已经解决了，我这里也只是再提一下而已。

首先这款插件在网站上所使用的案例仍旧是bootstrap2的，如果需要使用bootstrap3，可以先下载包，然后从里面的bootstrap3案例里面去参考。

查看例子的时候是不是会发现如下情况，日期的指向在了清除的按钮上，而我们更希望能放在后面显示日期的按钮上。

this.component = this.element.is('.date') ? ( this.bootcssVer == 3 ? this.element.find('.input-group-addon .glyphicon-th, .input-group-addon .glyphicon-time, .input-group-addon .glyphicon-remove, .input-group-addon .glyphicon-calendar, .input-group-addon .fa-calendar, .input-group-addon .fa-clock-o').parent() : this.element.find('.add-on .icon-th, .add-on .icon-time, .add-on .icon-calendar, .add-on .fa-calendar, .add-on .fa-clock-o').parent()) : false;
    this.componentReset = this.element.is('.date') ? ( this.bootcssVer == 3 ? this.element.find('.input-group-addon .glyphicon-remove, .input-group-addon .fa-times').parent():this.element.find('.add-on .icon-remove, .add-on .fa-times').parent()) : false;

上面这段代码是刚下载下来时候的。

对这段代码进行修改可以自定义产生日期div和删除图标控件，可以看到曾经的bootstrap2是默认支持fontawesome的图标的，但是bootstrap3需要我们在这里手动添加，也可以添加其他包的图标。

例如我就在component中删除了

 .input-group-addon .glyphicon-remove

控制在点击remove后不会再弹出日期控件

component中添加了

 .input-group-addon .icon-calendar

componentReset添加了

 .input-group-addon .icon-remove

用以支持fontawesome

效果：

//

this.fontAwesome = options.fontAwesome || this.element.data('font-awesome') || false;

通过配置fontAwesome：true可以更改上方左右的箭头，但是给出的

this.icons = {
      leftArrow: this.fontAwesome ? 'fa-arrow-left' : (this.bootcssVer === 3 ? 'glyphicon-arrow-left' : 'icon-arrow-left'),
      rightArrow: this.fontAwesome ? 'fa-arrow-right' : (this.bootcssVer === 3 ? 'glyphicon-arrow-right' : 'icon-arrow-right')
    }
    this.icontype = this.fontAwesome ? 'fa' : 'glyphicon';

这段代码中fa-arrow-left应该不是fontawesome现在版本的东西吧可以自行修改

//这部分内容是写到一半看到的。。。顺带看了一下也写上来了

接下来这个问题应该是datetimepicker的一个小bug

我设置了当天为endDate，但是却发现在月份这一项中无法选择五月，其实四月也是无法选中的

其原因是，插件是根据div中元素个数来确定的，然而div中不是只有一月到十二月这十二个元素，还有两个元素被计算进去了，就是年份边上的两个箭头。。。

这就导致了有2个月的偏差，其实这个偏差在程序中是有写的。可能只是忘了加到这里而已，如下面把offset加到endMonth上就可以了

if (year == endYear) {
        months.slice(endMonth+offset).addClass('disabled');
      }

以上就是本次记录~~~虽然还发现了一个问题，但是还没解决，就不写了