基于 Bootstrap Datetimepicker 联动


Posted in Javascript onAugust 03, 2017

先看一下 层级联动的案例

先选择前面时间后  后面的时间不要超过前面的时间

先选择后面的时间后,前面的时间不要少于后面的时间

下面看封装代码

function initDateTimePicker(startTime, endTime, timeFormat, minview) { 
  $(startTime).datetimepicker("remove"); 
  $(startTime).datetimepicker({ 
    language: sessionStorage.getItem("lang"), 
    autoclose: true, 
    todayHighlight: true, 
    endDate: new Date(), 
    format: timeFormat, 
    startView: minview, 
    minView: minview, 
  }).on("changeDate", function() { 
    var value = $(startTime).val(); 
    $(endTime).datetimepicker("remove"); 
    $(endTime).datetimepicker({ 
      language: sessionStorage.getItem("lang"), 
      autoclose: true, 
      todayHighlight: true, 
      endDate: new Date(), 
      startDate: value, 
      format: timeFormat, 
      startView: minview, 
      minView: minview, 
    }) 
  }); 
  $(endTime).datetimepicker("remove"); 
  $(endTime).datetimepicker({ 
    language: sessionStorage.getItem("lang"), 
    autoclose: true, 
    todayHighlight: true, 
    endDate: new Date(), 
    format: timeFormat, 
    startView: minview, 
    minView: minview, 
  }).on("changeDate", function() { 
    var value = $(endTime).val(); 
    $(startTime).datetimepicker("remove"); 
    $(startTime).datetimepicker({ 
      language: sessionStorage.getItem("lang"), 
      autoclose: true, 
      todayHighlight: true, 
      endDate: value, 
      format: timeFormat, 
      startView: minview, 
      minView: minview, 
    }) 
  }); 
}

初始化datetimepicker及起止时间双向联动公共方法 startTime:起始时间输入框id号,例如:'#archiveStartTime'

 endTime:结束时间输入框id号,例如:'#archiveEndTime' timeFormat:时间格式,例如:'yyyy-mm-dd',

 minview:最先显示时间 或者层级

总结

以上所述是小编给大家介绍的Bootstrap Datetimepicker 联动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
Require.js的基本用法详解
Jul 03 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 #Javascript
webpack开发跨域问题解决办法
Aug 03 #Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 #Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 #Javascript
解决ionic和angular上拉加载的问题
Aug 03 #Javascript
ES6学习教程之Map的常用方法总结
Aug 03 #Javascript
微信小程序之电影影评小程序制作代码
Aug 03 #Javascript
You might like
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php编写一个简单的路由类
2011/04/13 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP中使用BigMap实例
2015/03/30 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
精伦电子Java笔试题
2013/01/16 面试题
Java面向对象面试题
2016/12/26 面试题
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
廉洁校园实施方案
2014/05/25 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
调研汇报材料范文
2014/08/17 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL