Bootstrap DatePicker Limited optional Time range implementation Method _javascript skill

First, the application scene

The actual application may query data in a date range based on the Date field, and you need to restrict the date selector's optional time.

For example, the start time cannot be greater than the end time, the end time cannot be less than the start time, and the StartDate and EndDate values are dynamically set for the start date selector and the end date selector.

Second, relevant knowledge points

1, the initialization of Bootstrap-datepicker

Introduction of Bootstrap-datepicker.js and BOOTSTRAP-DATEPICKER.CSS

Understanding of Bootstrap-datepicker Configuration parameters

2, Boostrap-datepicker changedate event: triggered when the date changes

3, Bootstrap-datepicker Setenddate and Setstartdate method

4. Detailed configuration See official documentation http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html

Iii. Examples of application

1. In JSP, declare date selector

<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 "> Last access Time </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 "> to </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" > Search </ button> 
</div> 
</div> 

2, JS, the date selector for initialization and configuration

<span style= "FONT-SIZE:14PX;" >//Start time: 
$ (' #qBeginTime '). DatePicker ({ 
todaybtn: "Linked", 
autoclose:true, 
todayhighlight: True, 
enddate:new Date () 
}). On (' ChangeDate ', function (e) { 
var starttime = e.date; 
$ (' #qEndTime '). DatePicker (' setstartdate ', starttime); 
}); 
End time: 
$ (' #qEndTime '). DatePicker ({ 
todaybtn: "Linked", 
autoclose:true, 
todayhighlight:true , 
enddate:new Date () 
}). On (' ChangeDate ', function (e) { 
var endtime = e.date; 
$ (' #qBeginTime '). DatePicker (' setenddate ', endtime); 

3. Effect drawing

The above is a small set to introduce the bootstrap DatePicker limited optional time range to achieve the method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!