热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

bootstrapdatetimepicker实现秒钟选择下拉框

这篇文章主要为大家详细介绍了bootstrapdatetimepicker添加秒钟选择下拉框的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

        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 ? '';
 }
 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插件使用教程

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


推荐阅读
  • 本文探讨了缓存系统中的两个关键问题——缓存穿透与缓存失效时的雪崩效应,以及这些问题的解决方案。此外,文章还介绍了数据处理、数据库拆分策略、缓存优化、拆分策略、应用架构演进及通信协议的选择等内容。 ... [详细]
  • 深入理解SAP Fiori及其核心概念
    本文详细介绍了SAP Fiori的基本概念、发展历程、核心特性、应用类型、运行环境以及开发工具等,旨在帮助读者全面了解SAP Fiori的技术框架和应用场景。 ... [详细]
  • Apollo入门指南
    Apollo是一个分布式配置中心,由服务端和客户端组成,支持配置的集中管理和动态更新。 ... [详细]
  • 匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾(上)
    匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾(上) ... [详细]
  • J2EE平台集成了多种服务、API和协议,旨在支持基于Web的多层应用开发。本文将详细介绍J2EE平台中的13项关键技术规范,涵盖从数据库连接到事务处理等多个方面。 ... [详细]
  • Spring Boot 初学者指南(第一部分)
    本文介绍了Spring Boot框架的基础知识,包括其设计理念、主要优势以及如何简化传统的J2EE开发流程。 ... [详细]
  • ODB 2.1.0 版本现已推出,此更新引入了多项新功能,如通过访问器、修饰符、函数及表达式访问数据成员,支持虚拟数据成员,并允许在数据成员上直接定义数据库索引等。 ... [详细]
  • 在创建带有左侧图标的按钮时,遇到了文本与图标对齐的问题。本文提供了几种使用Bootstrap 4解决此问题的方法。 ... [详细]
  • 微服务自动化.dockercompose
    目录一、docker-compose二、docker-compose安装与配置1、修改docker.service2、下载文件3、将刚才下载的docker-compose文 ... [详细]
  • 本文介绍了.hbs文件作为Ember.js项目中的视图层,类似于HTML文件的功能,并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]
  • 本文详细介绍了如何利用 Bootstrap Table 实现数据展示与操作,包括数据加载、表格配置及前后端交互等关键步骤。 ... [详细]
  • Bootstrap Paginator 分页插件详解与应用
    本文深入探讨了Bootstrap Paginator这款流行的JavaScript分页插件,提供了详细的使用指南和示例代码,旨在帮助开发者更好地理解和利用该工具进行高效的数据展示。 ... [详细]
  • Bootstrap 的轮播图(Carousel)组件提供了一种简单而灵活的方法,用于在网站上实现响应式幻灯片效果。此组件不仅支持图片展示,还兼容嵌入式框架、视频等多媒体内容。 ... [详细]
  • 【小白学习C++ 教程】二十三、如何安装和使用 C++ 标准库
    【小白学习C++ 教程】二十三、如何安装和使用 C++ 标准库 ... [详细]
  • Bootstrap 插件使用指南
    本文详细介绍了如何在 Web 前端开发中使用 Bootstrap 插件,包括自动触发插件的方法、插件的引用方式以及具体的实例。 ... [详细]
author-avatar
手机用户2502863477
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有