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

Using the jquery UI first requires the introduction of the jquery class library, thejquery UI js script, and the jquery UI CSS style sheet. The code examples are 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: Introduction JS script, you should first introduce JQuery class Library, after introduction 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

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

[JavaScript]View Plaincopy

1. $ (document). Ready (function() {
3. $ ("#start"). DatePicker ();
5. $ ("#end"). DatePicker ();
7. });

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

[JavaScript]View Plaincopy

2. $ ("#start"). DatePicker ({
6. OnSelect:function(datetext,inst) {
10. $ ("#end"). DatePicker ("option","MinDate", Datetext);
14. }
18. });
22. $ ("#end"). DatePicker ({
26. OnSelect:function(datetext,inst) {
30. $ ("#start"). DatePicker ("option","MaxDate", Datetext  );
34. }
38. });

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

Start Date: < input type = "Text" ID = "Start" >

End Date: < input type = "Text" ID = "End" >

Js code is as follows

[JavaScript]View Plaincopy

1. var  dates = $ ("#start, #end");
3. 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 whether the setting is mindate or maxdate, and then uses the Not () function to reverse the selection of another DatePicker The object and sets its corresponding properties.

Js code is as follows

[JavaScript]View Plaincopy

2. Dates.datepicker ({
6. OnSelect: function(selectedDate) {
10. var option = This . id = = "Start"  ?  "MinDate"  :  "MaxDate"  ;
14. Dates.not (this). DatePicker ("option", option, selectedDate);
18. }
22. });

This allows the other party to be restricted after the party is set up.