這篇文章給大家分享的是有關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怎么限定日期選擇器可選時間范圍就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！