脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 基于 bootstrap-datetimepicker 联动

基于 Bootstrap Datetimepicker 联动

 更新时间：2017年08月03日 12:02:18   作者：everccnight  
这篇文章主要介绍了基于bootstrap datetimepicker 联动效果,需要的朋友可以参考下

先看一下 层级联动的案例

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

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

下面看封装代码

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 instanceof,typeof的区别

    javascript instanceof,typeof的区别

    区分string 与 String的区别
    2010-03-03
  • 教大家轻松制作Bootstrap漂亮表格（table）

    教大家轻松制作Bootstrap漂亮表格（table）

    这篇文章主要为大家详细介绍了Bootstrap轻松制作漂亮表格table的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • canvas学习之API整理笔记（一）

    canvas学习之API整理笔记（一）

    本文主要介绍了canvas的相关知识。canvas本身很简单，就是去学习它的API，多看实例，多自己动手练习，多总结。本文介绍了很多小例，具有一定的参考价值，下面跟着小编一起来看下吧
    2016-12-12
  • 原生js实现轮播图的示例代码

    原生js实现轮播图的示例代码

    本篇文章主要介绍了原生js实现轮播图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • javascript自动改变文字大小和颜色的效果的小例子

    javascript自动改变文字大小和颜色的效果的小例子

    这篇文章介绍了javascript自动改变文字大小和颜色的效果的小例子，有需要的朋友可以参考一下
    2013-08-08
  • 浅谈JS继承_借用构造函数 & 组合式继承

    浅谈JS继承_借用构造函数 & 组合式继承

    下面小编就为大家带来一篇浅谈JS继承_借用构造函数 & 组合式继承。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 基于Echart实现折线图的绘制详解

    基于Echart实现折线图的绘制详解

    EChart开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。本文将利用EChart实现折线图的绘制，感兴趣的可以学习一下
    2022-03-03
  • 浅谈JS中小数相加不精确的原因

    浅谈JS中小数相加不精确的原因

    Javascript在处理数字问题时，我们有可能遇到小数相加不准确的问题，本文主要介绍了浅谈JS中小数相加不精确的原因，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2023-04-04
  • JS实现搜索框文字可删除功能

    JS实现搜索框文字可删除功能

    本文给大家分享一段js代码实现搜索框文字可删除功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2016-12-12
  • js生成随机数的过程解析

    js生成随机数的过程解析

    这篇文章主要介绍了js生成随机数的过程，如何生成[n,m]的随机整数，感兴趣的小伙伴们可以参考一下
    2015-11-11

最新评论