這篇文章給大家分享的是有關bootstrap怎么限定日期選擇器可選時間范圍的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

灞橋網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,灞橋網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經驗。已為灞橋上千提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿網(wǎng)站建設要多少錢，請找那個售后服務好的灞橋做網(wǎng)站的公司定做！

一、應用場景

實際應用中可能會根據(jù)日期字段查詢某個日期范圍內的數(shù)據(jù)，則需要對日期選擇器可選時間進行限制，

如：開始時間不能大于結束時間，結束時間不能小于開始時間，此時就要為開始日期選擇器和結束日期選擇器動態(tài)的設置startDate和endDate的值。

二、相關知識點

1、bootstrap-datepicker的初始化

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

bootstrap-datepicker配置參數(shù)的了解

2、boostrap-datepicker的changeDate事件：日期改變時觸發(fā)

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怎么限定日期選擇器可選時間范圍
路徑分享：http://jinyejixie.com/article48/ijjgep.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站策劃、網(wǎng)站導航、ChatGPT、虛擬主機、云服務器

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)