JQuery UI leverages DatePicker plug-in implementation start date (mindate) and end Date (maxdate)

This article mainly describes the jquery UI using the DatePicker plug-in implementation start date (mindate) and end Date (maxdate), the need for friends can refer to the following

Using the jquery UI first requires the introduction of the jquery class Library, the jquery UI JS script, and the jquery UI CSS style sheet. The code examples are 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 script, we need to introduce jquery class library, then introduce jquery UI script

Here are two implementation steps:

Idea One:

The first step is to implement two DatePicker components.

You need to define two input tags, type text, and specify an id attribute

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 two input elements of the jquery object in the JS code and convert it to the DatePicker component

JS code is as follows

Copy CodeThe code is as follows:
$ (document). Ready (function () {
$ ("#start"). DatePicker ();
$ ("#end"). DatePicker ();
});

After doing this, click on the text box in the page and if DatePicker appears, it will be successful.

The second step sets the start and end dates

When the value of the start date is selected, the minimum value for the end date should be the start date, and similarly, when the end date is selected, the maximum value for the start date should be the end date. We can use the Onselect property in DatePicker to set the event that fires when a specified date is selected, specifying the corresponding DatePicker minimum or maximum date.

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 property in the anonymous function is a string of the currently selected date

Idea two:

The first step is to get two text box objects and convert them to DatePicker (using the jquery 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" >

JS code is as follows

Copy CodeThe code is as follows:
var dates = $ ("#start, #end");
Dates.datepicker ();

The second step also after selecting the date, triggering the Onselect event, calling the function to pass the SelectedDate parameter,

The function body first determines whether the triggering event is a start date or an end date, which specifies the setting mindate or MaxDate, and then uses the Not () function to reverse-select another DatePicker object and set its corresponding properties.

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

JQuery UI leverages DatePicker plug-in implementation start date (mindate) and end Date (maxdate)