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中，声明日期选择器

<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怎么限定日期选择器可选时间范围就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

分享题目：bootstrap怎么限定日期选择器可选时间范围
路径分享：https://www.cdcxhl.com/article48/ijjgep.html

成都网站建设公司_创新互联，为您提供网站营销、网站策划、网站导航、ChatGPT、虚拟主机、云服务器

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联