bootstrap datepicker限定可选时间范围实现方法

 更新时间:2016年09月28日 10:42:42   作者:弓长步又  
这篇文章主要介绍了bootstrap datepicker限定可选时间范围的实现方法,本文涉及到相关知识点,通过实例给大家介绍的非常详细,需要的朋友可以参考下

一、应用场景

实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制,

如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值。

二、相关知识点

1、bootstrap-datepicker的初始化

引入bootstrap-datepicker.js和bootstrap-datepicker.css

bootstrap-datepicker配置参数的了解

2、boostrap-datepicker的changeDate事件:日期改变时触发

3、bootstrap-datepicker的setEndDate和setStartDate方法

4、详细配置参见官方文档 http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html

三、应用实例

1、JSP中,声明日期选择器

<span style="font-size:14px;"><div class="col-md-6 cy-text-right-md"> 
<div class="form-inline"> 
<div class="form-group cy-mar-ver-s"> 
<span class="cy-pad-hor-s">最后接入时间</span> 
</div> 
<div class="input-daterange input-group" id="datepicker"> 
<input type="text" class="form-control" name="start" id="qBeginTime" /> 
<span class="input-group-addon">至</span> 
<input type="text" class="form-control" name="end" id="qEndTime" /> 
</div> 
<div class="form-group cy-mar-ver-s"> 
<button class="btn btn-primary cy-pad-rgt-s" onclick="javascript:doQuery();" type="button">搜索</button> 
</div> 
</div> 
</div></span> 

2、JS中,对日期选择器进行初始化和配置

<span style="font-size:14px;"> //开始时间: 
$('#qBeginTime').datepicker({ 
todayBtn : "linked", 
autoclose : true, 
todayHighlight : true, 
endDate : new Date() 
}).on('changeDate',function(e){ 
var startTime = e.date; 
$('#qEndTime').datepicker('setStartDate',startTime); 
}); 
//结束时间: 
$('#qEndTime').datepicker({ 
todayBtn : "linked", 
autoclose : true, 
todayHighlight : true, 
endDate : new Date() 
}).on('changeDate',function(e){ 
var endTime = e.date; 
$('#qBeginTime').datepicker('setEndDate',endTime); 
});</span> 

3、效果图

以上所述是小编给大家介绍的bootstrap datepicker限定可选时间范围实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • webpack独立打包和缓存处理详解

    webpack独立打包和缓存处理详解

    这篇文章主要介绍了webpack独立打包和缓存处理的相关资料,文中介绍的非常详细,对大家学习webpack具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • 微信小程序实现页面浮动导航

    微信小程序实现页面浮动导航

    这篇文章主要为大家详细介绍了微信小程序实现页面浮动导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS设计模式之观察者模式实现实时改变页面中金额数的方法

    JS设计模式之观察者模式实现实时改变页面中金额数的方法

    这篇文章主要介绍了JS设计模式之观察者模式实现实时改变页面中金额数的方法,结合实例形式对比分析了javascript基于观察者模式实时改变页面金额数的相关操作技巧,需要的朋友可以参考下
    2018-02-02
  • JS实现5秒钟自动封锁div层的方法

    JS实现5秒钟自动封锁div层的方法

    这篇文章主要介绍了JS实现5秒钟自动封锁div层的方法,涉及javascript针对div层操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • javascript 静态对象和构造函数的使用和公私问题

    javascript 静态对象和构造函数的使用和公私问题

    静态对象和构造函数的使用区别 平常我们会经常使用JSON形式,或者var obj=function(){}亦或function(){}这么几种对象的构建办法,有时会认为这是等价的办法,然而他们还有不同。
    2010-03-03
  • 高效率JavaScript编写技巧整理

    高效率JavaScript编写技巧整理

    最近在编写一个JavaScript框架,发现有很多细节注意得不够,于是开始关注JavaScript提高效率的一些技巧,在这里分享给大家,感兴趣的你可以参考下
    2013-08-08
  • javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    这篇文章主要介绍了javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等,需要的朋友可以参考下
    2014-05-05
  • 微信小程序利用云函数获取手机号码

    微信小程序利用云函数获取手机号码

    这篇文章主要介绍了微信小程序利用云函数获取手机号码功能,本文通过实例代码给大家讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 微信小程序实现全国机场索引列表

    微信小程序实现全国机场索引列表

    这篇文章主要为大家详细介绍了微信小程序实现全国机场索引列表,实现MUI索引列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • Java File类的常用方法总结

    Java File类的常用方法总结

    这篇文章主要介绍了Java File类的常用方法总结,本文讲解了File类的常用方法,并对一些方法给出了代码示例,需要的朋友可以参考下
    2015-03-03

最新评论