jQuery ui uses the datepicker plug-in to implement the start date (minDate) and end date (maxDate)

jQuery ui uses the datepicker plug-in to implement the start date (minDate) and end date (maxDate)_jquery

WBOY

Release： 2016-05-16 16:47:14

Original

1294 people have browsed it

To use jQuery ui, you first need to introduce the jQuery class library, jQuery ui js script and jQuery ui css style sheet. The code example is as follows:

Copy code The code is as follows:

Note: When introducing js scripts, you need to introduce the jQuery class library first, and then introduce the jQuery ui script

The following are two implementation steps:

Idea 1:

The first step is to implement two datepicker components.

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

HTML code is as follows

Copy code The code is as follows:

Start date:
End date:

Get the jQuery objects of the two input elements in the js code and convert them into datepicker components

The Js code is as follows

Copy code The code is as follows:

 $(document).ready(function(){ 
                                                                                                                                  
After implementing the above operation, click the text box on the page. If the datepicker appears, it means success. 

Step 2 Set the start and end dates

When the start date value is selected, the minimum value of the end date should be the start date; similarly, when the end date is selected, the maximum value of the start date should be the end date. We can use the onSelect attribute in the datepicker to set the event that is triggered when the specified date is selected, and use this event to specify the corresponding datepicker minimum date or maximum date.

The Js code is as follows

Copy code

The 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 is to obtain two text box objects at the same time and convert them into datepicker (using jQuery's selector)

HTML code is as follows

Copy code

The code is as follows:Start date: End date:

The Js code is as follows

Copy code

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

The second step: Also after selecting the date, trigger the onSelect event and call the function to pass the selectedDate parameter, 

In the function body, first determine whether the trigger event is the start date or end date. Use this judgment to specify and set minDate or maxDate, and then use the not() function to reversely select another datepicker object and set its corresponding property.

The Js code is as follows

Copy code

The 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 setting one party, the other party will be restricted.

The effect achieved is as shown below:

jQuery ui uses the datepicker plug-in to implement the start date (minDate) and end date (maxDate)_jquery