bootstrap datetimepicker实现秒钟选择下拉框


Posted in Javascript onJanuary 05, 2017

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

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

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

 bootstrap datetimepicker实现秒钟选择下拉框

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

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

//添加datetimepicker下拉框,如果配置要选择秒,否则不添加
 
 var addSec = /,s{1,2},/.test(',' + this.format.parts.join(',') + ','), sSec = addSec ? '<select style="width:100%">' : '';
 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);

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

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

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

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添加秒钟选择下拉框功能。点击这里下载修改过的bootstrap-datetimepicker.js文件

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

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

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

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

Javascript 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
vue请求数据的三种方式
Mar 04 Javascript
JavaScript实现数组降维详解
Jan 05 #Javascript
jQuery解析返回的xml和json方法详解
Jan 05 #Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 #Javascript
jQuery实现动态文字搜索功能
Jan 05 #Javascript
JS实现HTML标签转义及反转义
Apr 14 #Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 #Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 #Javascript
You might like
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
Django中处理出错页面的方法
2015/07/15 Python
Python Requests 基础入门
2016/04/07 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
django url到views参数传递的实例
2019/07/19 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python JSON编解码方式原理详解
2020/01/20 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python extract及contains方法代码实例
2020/09/11 Python
外企办公室竞聘演讲稿
2013/12/29 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
干部培训简讯
2015/07/20 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书