基于 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 日期处理之时区问题
Oct 08 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
js生成随机数的过程解析
Nov 24 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
JS打印彩色菱形的实例代码
Aug 15 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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封装好的人民币数值转中文大写类
2015/12/20 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
17个Python小技巧分享
2015/01/23 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python实现猜数字小游戏
2020/03/24 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
司马光教学反思
2014/02/01 职场文书
争当四好少年演讲稿
2014/09/13 职场文书