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

Source: Internet
Author: User

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

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

The effect of the implementation

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.