Bootstrap中的datetimepicker（日期控件）用法

在做項目的時候需要用到日期的控件，之前用的是H5的input type="date"標簽，考慮到兼容性的問題換了時間控件
剛好看到了datetimepicker，學習了一下，也再次做個簡單的筆記，進入正文
首先引入css 
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
        引入js，因為它支持多語言，所以我引入的是中文
    <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

    //年月日的時間配置（屬性都有注釋，常用的屬性基本都在下面）
    $('.form_datetime').datetimepicker({
                language:  'zh-CN', //語言類型
                weekStart: 1,//一周從哪一天開始
                todayBtn:1, // 當天日期按鈕``
                autoclose: 1,//選完時間后是否自動關閉
                todayHighlight: 1,//當天日期高亮
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
                maxView:4, //最高顯示到年份
                minView:2, //最低顯示到日
                startDate: getCurrentDate(), //這個時間之前的不能再選擇
                endDate:getCurrentDate(), //這個時間后面的不能再選擇
                initialDate: new Date(),//初始化當前日期
                format: 'yyyy-mm-dd',//時間格式
                pickerPosition:'bottom-right'//選擇框位置
    });

    // 年月日 時分秒
        $('.form_date').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn:  1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minuteStep:1,//分鐘間隔為1
                    maxView:4, //最高顯示到年份
                    minView:0, //最低顯示到日
                    forceParse: 0,
                    format: 'yyyy-mm-dd hh:ii:ss'
            });

```
//時分秒
        $('.form_time').datetimepicker({
                        language:  'zh-CN',
                        weekStart: 1,
                        todayBtn:  1,
                        autoclose: 1,
                        todayHighlight: 1,
                        startView: 1,
                        minView: 0,
                        maxView: 1,
                        forceParse: 0,
                        minuteStep:1,//分鐘間隔為1
                        showMeridian:false,//是否顯示上下午
                        format:'hh:ii:ss'
            });
```
不過使用上面的配置還是會出現(xiàn)一些問題，在使用時分秒的時候你會發(fā)現(xiàn)，并沒有秒的選擇(沒有出現(xiàn)秒的下拉框)，
那你就需要修改它的源碼了，修改源碼如下：

添加下拉框，找到this.picker.find('.datetimepicker-minutes td').html(html.join(''))這句
//添加datetimepicker下拉框，如果配置要選擇秒，否則不添加
        var addSec = /,s{1,2},/.test(',' + this.format.parts.join(',') + ','), sSec = addSec ? '<select >' : '';
        this.addSec = addSec;
        if (addSec) {
                var orgSec = this.viewDate.getSeconds();
                for (var _i = 0; _i < 60; _i++) sSec += '<option value="' + _i + '"' + (_i == orgSec ? ' selected' : '') + '>' + (_i < 10 ? '0' : '') + _i + '</option>';
                sSec += '</select>';
        }
        this.picker.find('.datetimepicker-minutes td').html(html.join('') + sSec);

    //修改容器點擊事件。增加下面的紅色語句，防止選擇select秒鐘時日期彈出框隱藏
        click: function (e) {
            e.stopPropagation();
            e.preventDefault();

//防止選擇秒鐘選擇器日期控件層隱藏
    if (e.target.tagName == 'SELECT' || e.target.tagName == 'OPTION') return；

    然后繼續(xù)往下找到case 'span'語句，修改里面秒鐘獲取方式，如下所示：
    case 'span':
    if (!target.is('.disabled')) {
        var year = this.viewDate.getUTCFullYear(),
        month = this.viewDate.getUTCMonth(),
        day = this.viewDate.getUTCDate(),
        hours = this.viewDate.getUTCHours(),
        minutes = this.viewDate.getUTCMinutes(),

     //修改datetimepicker秒鐘獲取方式
        seconds = this.addSec ? this.picker.find('select').val() : this.viewDate.getUTCSeconds();
        到此完成bootstrap datetimepicker添加秒鐘選擇下拉框功能

        到此為止，也就實現(xiàn)了datetimepicker的基本用法（ps:源碼部分的修改是我在遇到這個問題的時候
        從網(wǎng)上搜到的）