부트스트랩에서 날짜 선택기의 선택 가능한 시간 범위를 제한하는 방법은 무엇입니까? (코드 예)

bootstrap날짜 선택기의 선택 가능한 시간 범위를 제한하는 방법은 무엇입니까? 다음 글에서는 그 방법을 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

추천 관련 튜토리얼: "bootstrap tutorial"

1. 응용 시나리오

실제 응용에서는 날짜 필드를 기준으로 특정 날짜 범위 내의 데이터를 쿼리할 수 있으므로 다음을 수행해야 합니다. 날짜 선택기 설정 선택적 시간 제한,

예: 시작 시간은 종료 시간보다 클 수 없으며 종료 시간은 시작 시간보다 작을 수 없습니다. 이때 startDate 및 endDate 값은 다음과 같습니다. 시작 날짜 선택기와 종료 날짜 선택기에 대해 동적으로 설정되어야 합니다.

2. 관련 지식 포인트

1. bootstrap-datepicker 초기화

bootstrap-datepicker.js 및 bootstrap-datepicker.css 소개

bootstrap-datepicker 구성 매개변수 이해

2. datepickerchangeDate 이벤트: 날짜가 변경될 때 발생합니다

3. bootstrap-datepicker

4의 setEndDate 및 setStartDate 메소드는 공식 문서 http://bootstrap-datepicker.readthedocs.org/en/를 참조하세요. 최신/methods.html

3. 애플리케이션 예제

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;"> //开始时间：
		$(&#39;#qBeginTime&#39;).datepicker({
			todayBtn : "linked",
			autoclose : true,
			todayHighlight : true,
			endDate : new Date()
		}).on(&#39;changeDate&#39;,function(e){
			var startTime = e.date;
			$(&#39;#qEndTime&#39;).datepicker(&#39;setStartDate&#39;,startTime);
		});
		//结束时间：
		$(&#39;#qEndTime&#39;).datepicker({
			todayBtn : "linked",
			autoclose : true,
			todayHighlight : true,
			endDate : new Date()
		}).on(&#39;changeDate&#39;,function(e){
			var endTime = e.date;
			$(&#39;#qBeginTime&#39;).datepicker(&#39;setEndDate&#39;,endTime);
		});</span>

3를 초기화하고 구성합니다.

프로그래밍 학습 웹사이트를 방문하세요! !

위 내용은 부트스트랩에서 날짜 선택기의 선택 가능한 시간 범위를 제한하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!