基于 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 用CreateElement动态创建标签示例
Nov 20 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
Apr 13 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
VUE项目初建和常见问题总结
Sep 12 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中如何定义和使用常量
2013/02/28 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
javascript string字符串优化问题
2011/07/31 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
深入了解Python数据类型之列表
2016/06/24 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
智能钱包:Ekster
2019/11/21 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
本科毕业生自荐信
2014/05/26 职场文书
导游词400字
2015/02/13 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
红色经典电影观后感
2015/06/18 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python