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

在做項(xiàng)目的時(shí)候需要用到日期的控件，之前用的是H5的input type="date"標(biāo)簽，考慮到兼容性的問(wèn)題換了時(shí)間控件
剛好看到了datetimepicker，學(xué)習(xí)了一下，也再次做個(gè)簡(jiǎn)單的筆記，進(jìn)入正文
首先引入css 
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
        引入js，因?yàn)樗С侄嗾Z(yǔ)言，所以我引入的是中文
    <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>

    //年月日的時(shí)間配置（屬性都有注釋?zhuān)Ｓ玫膶傩曰径荚谙旅妫?    $('.form_datetime').datetimepicker({
                language:  'zh-CN', //語(yǔ)言類(lèi)型
                weekStart: 1,//一周從哪一天開(kāi)始
                todayBtn:1, // 當(dāng)天日期按鈕``
                autoclose: 1,//選完時(shí)間后是否自動(dòng)關(guān)閉
                todayHighlight: 1,//當(dāng)天日期高亮
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
                maxView:4, //最高顯示到年份
                minView:2, //最低顯示到日
                startDate: getCurrentDate(), //這個(gè)時(shí)間之前的不能再選擇
                endDate:getCurrentDate(), //這個(gè)時(shí)間后面的不能再選擇
                initialDate: new Date(),//初始化當(dāng)前日期
                format: 'yyyy-mm-dd',//時(shí)間格式
                pickerPosition:'bottom-right'//選擇框位置
    });

    // 年月日 時(shí)分秒
        $('.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'
            });

```
//時(shí)分秒
        $('.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'
            });
```
不過(guò)使用上面的配置還是會(huì)出現(xiàn)一些問(wèn)題，在使用時(shí)分秒的時(shí)候你會(huì)發(fā)現(xiàn)，并沒(méi)有秒的選擇(沒(méi)有出現(xiàn)秒的下拉框)，
那你就需要修改它的源碼了，修改源碼如下：

創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供墨竹工卡企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站制作、成都做網(wǎng)站、html5、小程序制作等業(yè)務(wù)。10年已為墨竹工卡眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站制作公司優(yōu)惠進(jì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);

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

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

    然后繼續(xù)往下找到case 'span'語(yǔ)句，修改里面秒鐘獲取方式，如下所示：
    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添加秒鐘選擇下拉框功能

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

新聞名稱(chēng)：Bootstrap中的datetimepicker（日期控件）用法
本文地址：http://muchs.cn/article32/ghjdpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、微信小程序、自適應(yīng)網(wǎng)站、做網(wǎng)站、響應(yīng)式網(wǎng)站、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容