Bootstrap datepicker: Specifies the implementation method of the optional time range, bootstrapdatepicker

Bootstrap datepicker: Specifies the implementation method of the optional time range, bootstrapdatepicker

I. Application scenarios

In practice, data in a certain date range may be queried Based on the date field. You need to restrict the optional time of the date selector,

For example, the start time cannot be later than the end time, and the end time cannot be earlier than the start time. In this case, you must dynamically set startDate and endDate values for the start date selector and end date selector.

Ii. Related Knowledge points

1. bootstrap-datepicker Initialization

Import bootstrap-datepicker.js and bootstrap-datepicker.css

Bootstrap-datepicker parameter configuration

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

3. The setEndDate and setStartDate methods of bootstrap-datepicker

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

3. Application Instances

1. Declare the date selector in 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 "> 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-primary cy-pad-rgt-s" onclick = "javascript: doQuery (); "type =" button "> Search </button> </div> </span>

2. initialize and configure the date selector in JS

<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) ;}); </span>

3,

The above section describes how to implement bootstrap datepicker in a limited time range. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!