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

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