Bootstrap DatePicker Limited optional Time range implementation Method _javascript skill

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.