JQuery UI leverages the DatePicker plug-in to implement the start date (mindate) and end Date (maxdate) (Level 10 participants Lin Chang summary)

Source: Internet
Author: User
the JQuery UI implements the start date (mindate) and end Date (maxdate) using the DatePicker plug-in

Using the jquery UI you first need to introduce the JQuery class library, the jquery UI JS script, and the jquery UI CSS style sheet. 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 you introduce a JS script, you need to introduce the JQuery class library, and then introduce the jquery UI script

Here are two implementation steps:

thought one:

The first step is to implement two DatePicker components.

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

The HTML code is as follows

Start Date: <input type= "text" id= "Start" >

Close Date: <input type= "text" id= "End" >

A jquery object that gets two input elements in the JS code and converts it into a datepicker component

JS code is as follows

$ (document). Ready (function () {

    $ ("#start"). DatePicker ();

    $ ("#end"). DatePicker ();

When you have done this, click on the text box in the page, and if it appears DatePicker is successful.

Step two set start and end dates

When you select a value for the start date, the minimum value for the end date should be the start date; Similarly, when the end date is selected, the maximum value for the start date should be the end date. We can use the Onselect attribute in DatePicker to set the event that is triggered when a specified date is selected to specify the corresponding DatePicker minimum or maximum date.

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 property in the anonymous function is the string of the current selection date

idea two:

The first step is to get two text box objects and convert them to DatePicker (using jquery's selector)

The HTML code is as follows

Start Date: <input type= "text" id= "Start" >

Close Date: <input type= "text" id= "End" >

JS code is as follows

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

Dates.datepicker ();

The second step also triggers the onselect event after selecting the date, calling the function to pass the SelectedDate argument,

The function body first determines whether the trigger event is the start or end date, by which the setting mindate or maxdate is specified, and then the Not () function is used to reverse select another DatePicker object and set its corresponding property.

JS 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 side to be restricted when the party is set.

The effect of the implementation is as shown in figure:

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.