图片 6

Bootstrap 设置datetimepicker在显示器下面弹出设置方法_javascript技能_脚本之家

By admin in 澳门新葡亰娱乐官网 on 2019年12月15日

datetimepicker默认是在输入框下面弹出的,但是遇到输入框在屏幕下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出。设置很简单,在初始话中:

Chapter Four. End

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

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

 


Bootstrap插件使用教程

添加pickerPosition:’top-right’即可。

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时,并且声明该输入框就可以实现上述目标了。

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

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

图片 1

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

图片 2

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

 

到此完成bootstrap
datetimepicker添加秒钟选择下拉框功能。点击这里下载修改过的bootstrap-datetimepicker.js文件

以上所述是小编给大家介绍的Bootstrap
设置datetimepicker在屏幕上面弹出设置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

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         *
 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                  
11                 
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()方法的的一个简单原型拓展。

图片 3图片 4

 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初始化,当你单击输入框时,向下弹出时间选择框。

//添加datetimepicker下拉框,如果配置要选择秒,否则不添加 var addSec = /,s{1,2},/.test(',' + this.format.parts.join, sSec = addSec ? '' : ''; this.addSec = addSec; if  { var orgSec = this.viewDate.getSeconds(); for (var _i = 0; _i < 60; _i++) sSec += '' + (_i < 10 ? '0' : '') + _i + ''; sSec += ''; } this.picker.find('.datetimepicker-minutes td').html;
$.datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0, pickerPosition:'top-right' });

Prologue . Bug And Analysis

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

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

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

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

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

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

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

  图片 5

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

   图片 6

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

  炸裂=。=

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

 

click: function  { e.stopPropagation;///防止选择秒钟选择器日期控件层隐藏 if (e.target.tagName == 'SELECT' || e.target.tagName == 'OPTION') return;

Chapter one . Purpose

  预设目标:

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

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

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

 

3)然后继续往下找到case
‘span’语句,大概916,修改里面秒钟获取方式,如下所示

bootstrap
datetimepicker插件没有秒钟选择器,如果要想选择的时间精确到秒没有办法控制,虽然可以配置format:’yyyy-mm-dd
hh:ii:ss’,会将秒钟添加到输入框中,但是无法控制秒钟数值,默认为当前客户端的时间的秒钟。

2)修改容器点击事件。大概846行,增加下面的红色语句,防止选择select秒钟时日期弹出框隐藏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

bootstrap datetimepicker添加秒钟选择下拉框步骤:

Bootstrap学习教程

bootstrap datetimepicker添加秒钟选择下拉框效果图:

 $.datetimepicker({ weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1, format: 'yyyy-mm-dd hh:ii:ss'/// });

Bootstrap Table使用教程

1)添加下拉框,找到this.picker.find(‘.datetimepicker-minutes
td’).html这句,大概在709行附近,改为下面的

case 'span': if (!target.is { 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 : this.viewDate.getUTCSeconds();

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

本示例修改bootstrap
datetimepicker源代码,如果配置了显示秒钟format:’……ss’,将会给分钟选择器层添加秒钟选择下拉框,可以自定义选择时间的秒钟部分,效果如下

注意:一定要配置format显示秒钟才会显示秒钟下拉框,否则不显示

Bootstrap实战教程

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有