雜談Bootstrap頁面框架時間選擇器datetimepicker

時間 2019-11-12

標籤雜談 bootstrap 頁面框架時間選擇器 datetimepicker 欄目 Bootstarp 简体版

原文原文鏈接

Prologue . Bug And Analysis

　　開心就好~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^_^css

　　寫這篇文章助助興，調劑下最近繁重的工做。是的，我如今化身成一個打雜的。架構

　　最近項目準備上線，系統穩定性和業務邏輯穩定性逐步提高後，可愛的小測試提出一個驚爲天人的二類BUG——app

　　　　Bootstrap頁面框架的時間選擇框選擇困難！框架

　　做爲一隻萌萌噠後臺狗，這種疑難雜症通常解決思路是：不予解決。ide

　　但是架構師讓我順便仔細考慮下此問題，儘可能不去切換頁面組件。T.T測試

　　好吧~~~那首先讓咱們首先分析下問題！這是Datetimepicker官方給出的示例。this

　　當頁面當前位置在靠近下端時，選擇框向下彈出：spa

　　妹！子！說！她！選！的！很！不！舒！服！prototype

　　炸裂=。=設計

　　好吧看看我能作什麼。T.T

Chapter one . Purpose

　　預設目標：

　　　　1. Datetimepicker時間選擇框儘可能放棄使用累贅的頁面配置（我初步設想是經過css樣式控制。）提升開發效率。

　　　　2. 當選擇框在頁面上部時，往下彈出。反之往上彈出。

　　　　3. 當輸入框爲只讀時，去掉禁止輸入的懸停事件手勢。（這是順便解決的另一個BUG=。=）

Chapter two . Used Source Code

　　Bootstrap是一款推特公司推出的頁面開發框架。許多運營商都爲它提供了js組件，好比頁面驗證，樹，選擇器，富文本等等等。

　　Bootstrap的核心理念是將扁平式交互設計並將終端屏幕分爲12等分。咱們這裏講的是它的一個經常使用的時間選擇器datetimepicker。

　　在頁面上使用datetimepicker咱們通常須要這樣搞：

　　HTML：

 1 <div class="form-group">
 2     <label class="col-sm-2 control-label" for="dtp_input2">
 3         海賊王下次多會斷更：
 4         <span style="color: red;">*</span>
 5     </label>
 6     <div class="col-md-10">
 7         <div class="input-group date col-sm-5 ">
 8             <input id="date1" class="form-control" type="text" size="16" readonly=readonly
 9                     value="<fmt:formatDate value="${date}" pattern="yyyy-MM-dd HH:mm"/>" />
10                 <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> 
11                 <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
12         </div>
13     </div>
14 </div>

　　備註：頁面須要聲明JS CSS引用。

　　JS：

1 $("#date1").datetimepicker({
2     language : 'zh-CN',
3     format : "yyyy-mm-dd hh:ii",
4     todayBtn : 1,    autoclose : 1,
5     todayHighlight : 1,
6     startDate : (new Date()).formate("yyyy-MM-dd HH:mm"),
7     pickerPosition : 'bottom-right'
8 });

　　這裏使用了(new Date()).formate("yyyy-MM-dd HH:mm")是對JS原型Date對象formate()方法的的一個簡單原型拓展。

 1 /**
 2  * JS原型初始化拓展
 3  */
 4 var formatPrototype = function() {
 5     ...
 6     /**
 7      * 對Date的擴展，將 Date 轉化爲指定格式的String
 8      * 月(M)、日(d)、12小時(h)、24小時(H)、分(m)、秒(s)、周(E)、季度(q) 能夠用 1-2 個佔位符 年(y)能夠用 1-4
 9      * 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字) eg: (new Date()).formate("yyyy-MM-dd
10      * hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 (new Date()).formate("yyyy-MM-dd
11      * E HH:mm:ss") ==> 2009-03-10 二 20:09:04 (new Date()). formate("yyyy-MM-dd
12      * EE hh:mm:ss") ==> 2009-03-10 週二 08:09:04 (new Date()).formate("yyyy-MM-dd
13      * EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04 (new Date()).formate("yyyy-M-d
14      * h:m:s.S") ==> 2006-7-2 8:9:4.18
15      */
16     Date.prototype.formate = function(fmt) {
17         var o = {
18             "M+" : this.getMonth() + 1, // 月份
19             "d+" : this.getDate(), // 日
20             "h+" : this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, // 小時
21             "H+" : this.getHours(), // 小時
22             "m+" : this.getMinutes(), // 分
23             "s+" : this.getSeconds(), // 秒
24             "q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
25             "S" : this.getMilliseconds()
26         // 毫秒
27         };
28         var week = {
29             "0" : "\u65e5",
30             "1" : "\u4e00",
31             "2" : "\u4e8c",
32             "3" : "\u4e09",
33             "4" : "\u56db",
34             "5" : "\u4e94",
35             "6" : "\u516d"
36         };
37         if (/(y+)/.test(fmt)) {
38             fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
39                     .substr(4 - RegExp.$1.length));
40         }
41         if (/(E+)/.test(fmt)) {
42             fmt = fmt
43                     .replace(
44                             RegExp.$1,
45                             ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f"
46                                     : "\u5468")
47                                     : "")
48                                     + week[this.getDay() + ""]);
49         }
50         for ( var k in o) {
51             if (new RegExp("(" + k + ")").test(fmt)) {
52                 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
53                         : (("00" + o[k]).substr(("" + o[k]).length)));
54             }
55         }
56         return fmt;
57     };
58     ...
59 };

View Code

　　頁面加載成功後，會加載JS將id爲date1的輸入框datetimepicker初始化，當你單擊輸入框時，向下彈出時間選擇框。

Chapter Three . Mine Design

　　首先創建一個公共類並引入。

　　enDatetimepicker.js

$(function(e) {
    ...
    formatPrototype();        //JS原型初始化拓展
    initDatetimepicker();      //初始化時間選擇器
    ...
});

/**
 * JS原型初始化拓展
 */
var formatPrototype = function() {
    ...//上面已經貼出
};

/**
 * 自定義元素初始化拓展，自適應屏幕高度並限制當前時間。IE click時間選擇器頁面跳動，完美即時自適應屏幕高度。
 */
var initDatetimepicker = function() {
    // bootstap datetimepicker need
    $('.sapphire_date').addClass('date');
    // mounse on in hand
    $('input', $('.sapphire_date')).css("cursor", "pointer");
    // init datetimepicker by offset
    $(".sapphire_date").click(function() {
        var allHeight = $(document).height();
        offset01 = $(this).offset();
        offsettop01 = offset01.top;
        offsetbottom01 = allHeight - offsettop01;
        if (offsetbottom01 <= 500) {
            $(this).datetimepicker({
                language : 'zh-CN',
                format : "yyyy-mm-dd hh:ii",
                todayBtn : 1,
                autoclose : 1,
                todayHighlight : 1,
                forceParse : 0,
                startDate : (new Date()).formate("yyyy-MM-dd HH:mm"),
                pickerPosition : 'top-right'
            }).on("hide", function() {
                $(this).datetimepicker('remove');
            });
        } else {
            $(this).datetimepicker({
                language : 'zh-CN',
                format : "yyyy-mm-dd hh:ii",
                todayBtn : 1,
                autoclose : 1,
                todayHighlight : 1,
                forceParse : 0,
                startDate : (new Date()).formate("yyyy-MM-dd HH:mm"),
                pickerPosition : 'bottom-right'
            }).on("hide", function() {
                $(this).datetimepicker('remove');
            });
        }
        $(this).datetimepicker('show');
    });
};

　　大功告成~！@當你加載該js時，而且聲明該輸入框class="... sapphire_date ..."就能夠實現上述目標了。

　　讓我感覺下它強大的氣場。

　　當輸入框出如今當前頁面下部的時候。

　　當輸入框出如今當前頁面上部的時候。

　　並且當鼠標懸停時，選擇手勢變成一隻小手。呵呵噠。