bootstrap-datetimepicker使用经验

前言

bootstrap-datetimepicker相比较jquery的datepicker插件而言，可以通过简单的选项设置，就实现只选择年，或者月，而不需要修改css或js文件。

基本使用

去网站下载解压之后，想要最简单的功能的话，引用css和js文件下的bootstrap-datetimepicker.css和bootstrap-datetimepicker.js文件。
如果不在意引入文件的多少，为了避免出现各种问题，可以全部引入。

html文件中：

<input id="datepicker" type="datetime" >

js文件中：

$('#datepicker').datetimepicker(
        {
            autoclose: 1,
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            clearBtn: true,
            todayBtn: false,
            endDate: new Date()
        })

其余选项、事件和方法同样可以在官网上找到介绍，选择使用，下面只说几点。

所遇问题

汉化

1. 引入文件，官网文件夹下，js–>locale–>bootstrap-datetimepicker.zh-CN.js；
2. 加属性， language: "zh-CN"。

选择年月日、年月、年

设置startView(开始的视图），minView(最精确的视图），并配合format(日期格式）联合使用。
startView和minView，设置为0，为分钟面板，1为小时，2为日面板，3为月，4为年。比如，只选择年月，希望刚打开就是月面板，则可以设置为，startView:3, minView:3，同时format可设置为yyyy-mm。

缓存内容会挡到选择面板

第一反应是去掉input的缓存。不知还有没有更好的办法。
设置input属性，autocomplete="off"。详细如下,

<input id="datepicker" type="datetime"  autocomplete="off">

开始时间必须小于结束时间

最好是让两个input框同时初始化。参考其他文章，解决方法如下，

function DatePicker(beginSelector, endSelector) {
    $(beginSelector).datetimepicker(
        {
            language: "zh-CN",
            autoclose: 1,
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            clearBtn: true,
            todayBtn: false,
            endDate: new Date()
        }).on('changeDate', function (ev) {
            if (ev.date) {
                $(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
            } else {
                $(endSelector).datetimepicker('setStartDate', null);
            }
        });

    $(endSelector).datetimepicker(
        {
            language: "zh-CN",
            autoclose: 1,
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            clearBtn: true,
            todayBtn: false,
            endDate: new Date()
        }).on('changeDate', function (ev) {
            if (ev.date) {
                $(beginSelector).datetimepicker('setEndDate', new Date(ev.date.valueOf()))
            } else {
                $(beginSelector).datetimepicker('setEndDate', new Date());
            }

        });
}

DatePicker("#startDatepicker", "#endDatepicker");

效果如下，

借用这个例子说一下，bootstrap-datetimepicker封装的事件和函数的使用方法。
例如，changeDate是datetimepicker封装的事件，当日期被改变时就触发。使用方式如下，

 $(beginSelector).datetimepicker({

       }).on('changeDate',function(ev){
       
       });

setStartDate是封装好的函数，使用如下，

$(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
datetimepicker('setStartDate',new Date(ev.date.valueOf());

面板图标不显示的问题

因为使用的基本样式框架不是bootstrap,是semantic,所以图标的引用文件也不同，于是出现了箭头图标不显示的问题。但是看网上，即使使用bootstrap，版本不对，依旧也会出现这种问题。
但归根结底呢，就是bootstrap-datetimepicker.js引用的icon的class不对的问题，所以我直接更改了js文件（虽然这不是个好办法，应该最好的是改写），将

 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';

改成：

this.icons = {
        leftArrow: 'angle left',
        rightArrow: 'angle right'
    }
   this.icontype = 'icon';