The JQuery UI implements the start date (mindate) and end Date (maxdate) using the DatePicker plug-in _jquery

Using the jquery UI you first need to introduce the JQuery class library, the jquery UI JS script, and the jquery UI CSS style sheet. The code example is as follows:

Copy Code code 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 you introduce a JS script, you need to introduce the JQuery class library, and then introduce the jquery UI script

Here are two implementation steps:

Thought one:

The first step is to implement two DatePicker components.

You need to define two input labels, type text, and specify the id attribute

The HTML code is as follows

Copy Code code as follows:

Start Date: <input type= "text" id= "Start" >
Close Date: <input type= "text" id= "End" >

A jquery object that gets two input elements in the JS code and converts it into a datepicker component

JS code is as follows

Copy Code code as follows:

$ (document). Ready (function () {
$ ("#start"). DatePicker ();
$ ("#end"). DatePicker ();
});

When you have done this, click on the text box in the page, and if it appears DatePicker is successful.

Step two set start and end dates

When you select a value for the start date, the minimum value for the end date should be the start date; Similarly, when the end date is selected, the maximum value for the start date should be the end date. We can use the Onselect attribute in DatePicker to set the event that is triggered when a specified date is selected to specify the corresponding DatePicker minimum or maximum date.

JS code is as follows

Copy Code code 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 property in the anonymous function is the string of the current selection date

Idea two:

The first step is to get two text box objects and convert them to DatePicker (using jquery's selector)

The HTML code is as follows

Copy Code code as follows:

Start Date: <input type= "text" id= "Start" >
Close Date: <input type= "text" id= "End" >

JS code is as follows

Copy Code code as follows:

var dates = $ ("#start, #end");
Dates.datepicker ();

The second step also triggers the onselect event after selecting the date, calling the function to pass the SelectedDate argument,

The function body first determines whether the trigger event is the start or end date, by which the setting mindate or maxdate is specified, and then the Not () function is used to reverse select another DatePicker object and set its corresponding property.

JS code is as follows

Copy Code code as follows:

Dates.datepicker ({
Onselect:function (selectedDate) {
var option = This.id = = "Start"? "MinDate": "MaxDate";
Dates.not (This). DatePicker ("option", option, selectedDate);
}
});

This allows the other side to be restricted when the party is set.

The effect of the implementation is as shown in figure: