The jQuery UI implements the start date of minDate and end date of maxDate using the datepicker plug in

Using jQuery UI first requires the introduction of jQuery class library, jQuery UI js scripts and jQuery UI CSS style sheets. The code example 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, it is necessary to first introduce jQuery class library, then introduce jQuery UI script

The following are two implementation steps:

Idea 1:

The first step   Implement two datepicker components.

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

The HTML code looks like this

 Start date: <input type="text" id="start">
 End date: <input type="text" id="end">

Get the jQuery object for the two input elements in the js code and convert it to the datepicker component

The Js code is as follows

    $(document).ready(function(){  
        $("#start").datepicker();  
        $("#end").datepicker();  
    });  

Once you've done this, click the text box on the page, and if the datepicker appears, it represents success.

The second step   Set start and end dates

  When the start date is selected, the minimum value of the end date should be the start date. Similarly, when the end date is selected, the maximum start date should be the end date. We can use the onSelect property in the datepicker to set the event that fires when the specified date is selected to specify the corresponding datepicker minimum date or maximum date.

The Js 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 currently selected date

Idea 2:

The first step   Get both text box objects and convert them to datepicker (using jQuery's selector)

The HTML code looks like this

The same code at the page code block index 1

The Js code is as follows

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

The second step   Also after the date is selected, the onSelect event is triggered, and the function is called to pass the selectedDate parameter,

The start or end date in the body of the function is the first to determine whether the event is triggered. This determines the setting of minDate or maxDate, and then USES the not() function to reverse select another datepicker object and set its corresponding properties.

The Js code is as follows

dates.datepicker({
    onSelect: function(selectedDate){
       var option = this.id == "start" ? "minDate" : "maxDate";
       dates.not(this).datepicker("option", option, selectedDate);
    }
});

So once you set one side, the other side will be restricted.

The implementation effect is shown as follows:

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/2014522112343996.jpg? 2014422112354 ">