JQuery ui uses the datepicker plug-in to implement minDate and maxDate)

Source: Internet
Author: User

To use jQuery ui, you must first introduce the jQuery class library, jQuery ui js script, and jQuery ui css style sheet. The sample code is as follows:

Copy codeThe Code is as follows:
<Script src = "js/jquery-1.7.1.js"> </script>
<Script src = "js/jquery-ui-1.8.18.custom.min.js"> </script>
<Link rel = "stylesheet" type = "text/css" href = "css/smoothness/jquery-ui-1.8.18.custom.css">

Note: When introducing js scripts, you must first introduce the jQuery class library and then introduce the jQuery ui script.

The following are two implementation steps:

Thought 1:

The first step is to implement two datepicker components.

Two input tags must be defined, whose type is text and the id attribute must be specified.

The HTML code is as follows:

Copy codeThe Code is as follows:
Start Date: <input type = "text" id = "start">
End Date: <input type = "text" id = "end">

Get the jQuery object of two input elements in js Code and convert it into a datepicker component.

The Js Code is as follows:

Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# Start"). datepicker ();
$ ("# End"). datepicker ();
});

After the preceding operations are performed, click the text box on the page. If datepicker is displayed, the operation is successful.

Step 2 set the start and end dates

After the start date value is selected, the minimum value of the end date should be the start date. Similarly, After the end date is selected, the maximum value of the start date should be the end date. We can use the onSelect attribute in datepicker to set the event triggered after a specified date, and use this event to specify the corresponding datepicker minimum date or maximum date.

The Js Code is as follows:

Copy codeThe Code is as follows:
$ ("# Start"). datepicker ({
OnSelect: function (dateText, inst ){
$ ("# End"). datepicker ("option", "minDate", dateText );
}
});
$ ("# End"). datepicker ({
OnSelect: function (dateText, inst ){
$ ("# Start"). datepicker ("option", "maxDate", dateText );
}
});

Note: The dateText attribute in the anonymous function is the string of the selected date.

Thought 2:

Step 1 get two text box objects at the same time and convert them to datepicker (using jQuery's selector)

The HTML code is as follows:

Copy codeThe Code is as follows:
Start Date: <input type = "text" id = "start">
End Date: <input type = "text" id = "end">

The Js Code is as follows:

Copy codeThe Code is as follows:
Var dates =$ ("# start, # end ");
Dates. datepicker ();

Step 2: After the date is selected, the onSelect event is triggered and the selectedDate parameter is passed by calling the function,

In the function body, first determine whether the trigger event is the start date or end date. Use this judgment to specify the minDate or maxDate, and then use the not () function to select another datepicker object in the reverse direction, and set its corresponding properties.

The Js Code is as follows:

Copy codeThe Code is as follows:
Dates. datepicker ({
OnSelect: function (selectedDate ){
Var option = this. id = "start "? "MinDate": "maxDate ";
Dates. not (this). datepicker ("option", option, selectedDate );
}
});

In this way, after one party is set, the other party will be restricted.

Implementation Effect

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.