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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
window.location和document.location的区别分析
Dec 23 Javascript
javascript 模拟点击广告
Jan 02 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
简单谈谈json跨域
Mar 13 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 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
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
jquery ztree实现树的搜索功能
2016/02/25 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python让列表倒序输出的实例
2018/06/25 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
numpy库reshape用法详解
2020/04/19 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
校企合作协议书
2014/04/16 职场文书
大跃进口号
2014/06/16 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
同事离别感言
2015/08/04 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android