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

創(chuàng)新互聯(lián)建站成都網站建設定制設計，是成都網站推廣公司,為廣告推廣提供網站建設服務,有成熟的網站定制合作流程，提供網站定制設計服務：原型圖制作、網站創(chuàng)意設計、前端HTML5制作、后臺程序開發(fā)等。成都網站營銷推廣熱線：13518219792

一、應用場景

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

如：開始時間不能大于結束時間，結束時間不能小于開始時間，此時就要為開始日期選擇器和結束日期選擇器動態(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怎么限定日期選擇器可選時間范圍-創(chuàng)新互聯(lián)
本文鏈接：http://chinadenli.net/article6/dgpdig.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網站、App設計、ChatGPT、網站營銷、域名注冊、品牌網站制作

廣告

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