这篇文章给大家分享的是有关bootstrap怎么限定日期选择器可选时间范围的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
一、应用场景
实际应用中可能会根据日期字段查询某个日期范围内的数据，则需要对日期选择器可选时间进行限制，
如：开始时间不能大于结束时间，结束时间不能小于开始时间，此时就要为开始日期选择器和结束日期选择器动态的设置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怎么限定日期选择器可选时间范围就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
