bootstrap怎么限定日期选择器可选时间范围
这篇文章给大家分享的是有关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中,声明日期选择器
最后接入时间
至
2、JS中,对日期选择器进行初始化和配置
//开始时间:
$('#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);
});
3、效果图
感谢各位的阅读!关于bootstrap怎么限定日期选择器可选时间范围就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
分享名称:bootstrap怎么限定日期选择器可选时间范围
网页地址:http://myzitong.com/article/ijjgep.html