bootstrap datetimepicker实现秒钟选择下拉框

 更新时间:2017年01月05日 10:06:01   作者:huan_web  
这篇文章主要为大家详细介绍了bootstrap datetimepicker添加秒钟选择下拉框的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

相关文章

  • 不得不分享的JavaScript常用方法函数集(下)

    不得不分享的JavaScript常用方法函数集(下)

    不得不分享的JavaScript常用方法函数集,帮助大家更好的学习javascript程序设计,有兴趣的朋友可以参考一下
    2015-12-12
  • JavaScript中的类型判断你真的了解了吗

    JavaScript中的类型判断你真的了解了吗

    这篇文章主要为大家详细介绍了JavaScript中类型判断的相关常见方法,文中的示例代码讲解详细,对我们深入学习JavaScript有一定帮助,需要的可以参考下
    2023-11-11
  • 类似php的js数组的in_array函数自定义方法

    类似php的js数组的in_array函数自定义方法

    PHP的数组函数in_array()非常方便,下面就为大家介绍下自定义类似php的js数组的in_array函数,具体实现方法如下,感兴趣的朋友可以参考下
    2013-12-12
  • js跨域的几种解决方案

    js跨域的几种解决方案

    本文主要介绍了js跨域的几种解决方案,主要介绍了8种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-05-05
  • JavaScript动态生成二维码图片

    JavaScript动态生成二维码图片

    本文给大家介绍js动态生成二维码图片的相关内容,感兴趣的朋友一起学习吧
    2016-04-04
  • javascript写的异步加载js文件函数(支持数组传参)

    javascript写的异步加载js文件函数(支持数组传参)

    这篇文章主要介绍了javascript写的异步加载js文件函数,同时支持单个文件和多个文件(数组传参),但不兼容IE6,需要的朋友可以参考下
    2014-06-06
  • javascript中&&运算符与||运算符的使用方法实例

    javascript中&&运算符与||运算符的使用方法实例

    &&和||总是傻傻分不清,在这里详细记录一下吧,也给你们分享一下,所以这篇文章主要给大家介绍了关于javascript中&&运算符与||运算符的使用方法,需要的朋友可以参考下
    2021-11-11
  • ES6中export default和export之间的区别详解

    ES6中export default和export之间的区别详解

    export和export default都是es6语法中用来导出组件的,可以导出的文档类型有( 数据、常量、函数、js文件、模块等),下面这篇文章主要给大家介绍了关于ES6中export default和export之间的区别的相关资料,需要的朋友可以参考下
    2023-04-04
  • JavaScript生成UUID的五种方法详解

    JavaScript生成UUID的五种方法详解

    UUID是一种由算法生成的二进制长度为128位的数字标识符,格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”。本文总结了五个JS生成UUID的方法,感兴趣的可以了解一下
    2022-06-06
  • 前端文件上传实现代码示例(文件上传,分片上传,断点续传)

    前端文件上传实现代码示例(文件上传,分片上传,断点续传)

    本文总结了普通文件上传和分片上传的方法,普通上传通过FormData和axios实现文件发送,而分片上传则将大文件切割并并行或串行上传,最后合并分片,提高上传效率和稳定性,还介绍了断点续传和处理上传过程中的异常情况,需要的朋友可以参考下
    2024-09-09

最新评论