How to limit the selectable time range of date picker in bootstrap? (code example)

bootstrapHow to limit the selectable time range of the date picker? The following article will introduce the method to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Recommended related tutorials: "bootstrap tutorial"

1. Application scenarios

In actual applications, data within a certain date range may be queried based on the date field, and the optional time of the date selector needs to be limited.

For example: the start time cannot be greater than the end time , the end time cannot be less than the start time. At this time, the values ​​of startDate and endDate must be dynamically set for the start date selector and end date selector.

2. Related knowledge points

1. Initialization of bootstrap-datepicker

Introduce bootstrap-datepicker.js and bootstrap -datepicker.css

Understanding of bootstrap-datepicker configuration parameters

2. boostrap-datepicker's changeDate event: triggered when the date changes

3. bootstrap-datepicker's setEndDate and setStartDate method

4. For detailed configuration, please refer to the official document http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html

3. Application examples

1. In JSP, declare the date picker

<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. In JS, initialize and configure the date picker

               <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. Rendering

For more programming-related knowledge, please visit: Programming Learning Website! !

The above is the detailed content of How to limit the selectable time range of date picker in bootstrap? (code example). For more information, please follow other related articles on the PHP Chinese website!