基于 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 相关文章推荐
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
JScript中的条件注释详解
Apr 24 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
详解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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP的拦截器实例分析
2014/11/03 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Python3中的json模块使用详解
2018/05/05 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python实现拼图小游戏
2020/02/22 Python
Python多线程thread及模块使用实例
2020/04/28 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
综艺节目策划方案
2014/06/13 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
干部考核工作总结2015
2015/07/24 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python