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

Source: Internet
Author: User

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!

Related Article

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.