杂谈Bootstrap页面框架时间选择器datetimepicker

Prologue . Bug And Analysis

　　开心就好~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^_^

　　写这篇文章助助兴，调剂下最近繁重的工作。是的，我现在化身成一个打杂的。

　　最近项目准备上线，系统稳定性和业务逻辑稳定性逐步提升后，可爱的小测试提出一个惊为天人的二类BUG——

　　　　Bootstrap页面框架的时间选择框选择困难！

　　作为一只萌萌哒后台狗，这种疑难杂症一般解决思路是：不予解决。

　　可是架构师让我顺便仔细考虑下此问题，尽量不去切换页面组件。T.T

　　好吧~~~那首先让我们首先分析下问题！这是Datetimepicker官方给出的示例。

　　

　　当页面当前位置在靠近下端时，选择框向下弹出：

　　　

　　妹！子！说！她！选！的！很！不！舒！服！

　　炸裂=。=

　　好吧看看我能做什么。T.T

 

Chapter one . Purpose

　　预设目标：

　　　　1. Datetimepicker时间选择框尽量放弃使用累赘的页面配置（我初步设想是通过css样式控制。）提高开发效率。

　　　　2. 当选择框在页面上部时，往下弹出。反之往上弹出。

　　　　3. 当输入框为只读时，去掉禁止输入的悬停事件手势。（这是顺便解决的另外一个BUG=。=）

 

Chapter two . Used Source Code

　　Bootstrap是一款推特公司推出的页面开发框架。许多运营商都为它提供了js组件，比如页面验证，树，选择器，富文本等等等。

　　Bootstrap的核心理念是将扁平式交互设计并将终端屏幕分为12等分。我们这里讲的是它的一个常用的时间选择器datetimepicker。

　　在页面上使用datetimepicker我们一般需要这样搞：

　　HTML：

<div class="form-group">
    <label class="col-sm-2 control-label" for="dtp_input2">
        海贼王下次多会断更：
        <span style="color: red;">*</span>
    </label>
    <div class="col-md-10">
        <div class="input-group date col-sm-5 ">
            <input id="date1" class="form-control" type="text" size="16" readonly=readonly
                    value="<fmt:formatDate value="${date}" pattern="yyyy-MM-dd HH:mm"/>" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> 
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
    </div>
</div>

 

　　备注：页面需要声明JS CSS引用。

　　JS：

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

　　这里使用了(new Date()).formate("yyyy-MM-dd HH:mm")是对JS原型Date对象formate()方法的的一个简单原型拓展。

/**
 * JS原型初始化拓展
 */
var formatPrototype = function() {
    ...
    /**
     * 对Date的扩展，将 Date 转化为指定格式的String
     * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符 年(y)可以用 1-4
     * 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) eg: (new Date()).formate("yyyy-MM-dd
     * hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 (new Date()).formate("yyyy-MM-dd
     * E HH:mm:ss") ==> 2009-03-10 二 20:09:04 (new Date()). formate("yyyy-MM-dd
     * EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04 (new Date()).formate("yyyy-MM-dd
     * EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04 (new Date()).formate("yyyy-M-d
     * h:m:s.S") ==> 2006-7-2 8:9:4.18
     */
    Date.prototype.formate = function(fmt) {
        var o = {
            "M+" : this.getMonth() + 1, // 月份
            "d+" : this.getDate(), // 日
            "h+" : this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, // 小时
            "H+" : this.getHours(), // 小时
            "m+" : this.getMinutes(), // 分
            "s+" : this.getSeconds(), // 秒
            "q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
            "S" : this.getMilliseconds()
        // 毫秒
        };
        var week = {
            "0" : "\u65e5",
            "1" : "\u4e00",
            "2" : "\u4e8c",
            "3" : "\u4e09",
            "4" : "\u56db",
            "5" : "\u4e94",
            "6" : "\u516d"
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
        }
        if (/(E+)/.test(fmt)) {
            fmt = fmt
                    .replace(
                            RegExp.$1,
                            ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f"
                                    : "\u5468")
                                    : "")
                                    + week[this.getDay() + ""]);
        }
        for ( var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                        : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    };
    ...
};

　　页面加载成功后，会加载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 ..."就可以实现上述目标了。

　　让我感受下它强大的气场。

　　当输入框出现在当前页面下部的时候。

　　当输入框出现在当前页面上部的时候。

　　而且当鼠标悬停时，选择手势变成一只小手。呵呵哒。

 

Chapter Four. End

　　压压惊，这下我可以心安理得的关闭这几个BUG了吧！

　　如果你有更好的解决方式请指教我^_^。