jquery UI DatePicker Use

In web development, there is always a case where the user is required to enter a date. Typically, a text type of input is provided for the user to enter a date. However, in this way, the developer must validate the date entered by the user and judge its legitimacy. In addition, the user input date is also a bad thing, if the user can directly select the date, both issues are resolved. It sounds good. In fact, this is what many developers do.

We can write a date selection control on our own JavaScript, but it takes a lot of time and effort to write nicely and beautifully. jquery has a UI plugin: Datepicher, which can help us with this feature, and the interface is beautiful. Learn how to use it below.

The Datepicher plugin is a plug-in for the jquery UI that provides a date pop-up window (or directly on the page) for the user to select a date.

The use of the Datepicher plugin is simple and the syntax is as follows:

$ ("#regDate"). Datepicher (optional);

Where optional is an object, each property and meaning of the object can be see the official document: http://jqueryui.com/demos/datepicker/. Here, only some of the commonly used properties are described.

1, datepicher the simplest use

JavaScript code

$ ("#regDate"). Datepicher ();   

Where regdate is the id attribute value of the page date input box.

In this sentence, when the date input box gets the focus, a date selection window pops up. However, this time the Date Selection window has a lot of inconvenient places, such as: Only one months and one months forward or backward, there is no close button and so on.

2, Configuration Datepicher

You can change the default display by setting some property values for Datepicher. Such as:

$ ("#regDate"). DatePicker ({showmonthafteryear:true,//month after year display Changemonth:true,//Allow Select month changeyear:true,//Allow select year DateFormat: ' Yy-mm-dd ',//Set date format c Losetext: ' Off ',//Only showbuttonpanel:true will show up duration: ' Fast ', Showanim: ' FadeIn ', Showon: ' button ',//Display a button trigger next to the input box, the default is: Focus. can also be set to both buttonimage: ' images/commons/calendar.gif ',//button icon Buttonimageonly:true,//Do not display the icon on the button , that is, remove the button buttontext: ' Select Date ', Showbuttonpanel:true, Showothermonths:true,//appendtext: ' (yyyy-mm -DD) ',}); 

The date selection at this time of the

is very convenient. You can freely select the year and month.  

3, add Clear button and date judgment function (Enhanced version datepicher1.7.2)  

datepicher1.7.2 version does not provide a clear button, which is a bit regrettable. (as if the previous version was available). It is inconvenient not to clear the button, especially if the input box has the focus on the pop-up date Selection window, as it is difficult to clear the date in the input box. In this recommendation a Netizen provides enhanced version datepicher1.7.2. This enhanced datepicher1.7.2 not only implements the Clear button function, but also increases the date size comparison validation, such as: one date can only be followed by another. You can visit this URL to view: http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html. The use of Datepicher is now quite perfect:

$ (function () {$ ("#effDate"). DatePicker ({showmonthafteryear:true,//month shows Changemonth after the year: True,//Allow Select month changeyear:true,//Allow select year DateFormat: ' Yy-mm-dd ',//Set date format Showclearbutton:tr UE,//cleartext: ' Clear ', Closetext: ' Off ',//Only showbuttonpanel:true will show up duration: ' Fast ', sho        Wanim: ' FadeIn ', Showon: ' button ', buttonimage: ' Images/commons/calendar.gif ', buttonimageonly:true,        ButtonText: ' Select Date ', Showbuttonpanel:true, Showothermonths:true,//appendtext: ' (YYYY-MM-DD) ',      Onselect:function (Datetext, inst)//Make the end time greater than the start time {/** * The following notation occurs in IE.      * $ (' #expDate '). DatePicker (' option ', ' mindate ', New Date (Datetext.replace (/-/g, ', '))); *, the annual meeting is not available at the end (expiration time), and the control will expire. By debugging, it is found that the new Date (Datetext.replace (/-/g, ', ')) * Returns the result of Nan.         Indicates that the date object cannot be constructed like this (but Firefox can) */var Arys = new Array (); var Arys = Datetext.split (‘-‘);        $ (' #expDate '). DatePicker (' option ', ' mindate ', New Date (arys[0],arys[1]-1,arys[2]));           }      });        $ ("#expDate"). DatePicker ({showmonthafteryear:true,//month after year show Changemonth:true,//Allow select month Changeyear:true,//Allow select year DateFormat: ' Yy-mm-dd ',//Set date format showclearbutton:true,//custom method (1.7.2 not clear by button)//cleartext: ' Clear ',//custom text, in the document in the definition (JS) closetext: ' Off ',//Only showbuttonpanel:true will show Dur ation: ' Fast ', Showanim: ' FadeIn ', Showon: ' button ',//button trigger next to the input box, default: Focus. can also be set to both buttonimage: ' images/commons/calendar.gif ',//button icon Buttonimageonly:true,//Do not display the icon on the button , that is, remove the button buttontext: ' Select Date ', Showbuttonpanel:true, Showothermonths:true,//appendtext: ' (yyyy-mm        -DD) ', Onselect:function (Datetext, inst) {var Arys = new Array ();         var Arys = datetext.split ('-'); $ (' #effDate '). DatePicker (' option ',' MaxDate ', New Date (arys[0],arys[1]-1,arys[2]);      }      });     });

4. Internationalization

Datepicher provides an international capability. Simply import the ui.datepicker-zh-cn.js into the page. (or import Jquery-ui-i18n.js, which contains many Chinese languages) Note that if you want to use the enhanced datepicher1.7.2 mentioned above, you will need to download the internationalized file provided by the author. Also, if you're coding with tools like eclipse, be aware that using Eclipse to open internationalized files is likely to appear garbled. Only need to change the file encoding format to Utf-8, and then use other editing tools, such as EditPlus open internationalized file, copy, paste overwrite eclipse, save is OK.

5, internationalization for the Chinese may encounter display problems

After using internationalization to enable both Changeyear and Changemonth, two select displays are two lines, which is very unattractive. For a long time, found in the official supply of JQUERY-UI-1.7.2.CUSTOM.CSS, should make the following changes:

　　should read :

　　

It's OK.

6. Skin changing

The JQuery UI is pre-defined with a lot of skins, and when downloaded, the skin can be jquery-ui-1.7.2.custom.css by simply introducing the skins into the page. If the user is provided with a skin-changing function, you can use the JS control to achieve skin change.

Summarize:

Can be seen, datepicher is a very useful plug-in, than their own writing is sure to use a lot of, recommended everyone.

In addition, in use, you can define a file that contains the use of the plug-in, configured well. Where you need to use it later, introduce the file, and pass it to the id attribute of the currently required date selection control, so you can configure it only once.

Other practical methods:

How to use:

1. Date of limitation

$ ("#resultDiv"). DatePicker ({                onselect:function (datetext, inst) {                    //code: Event triggered after select Date                },                mindate:new Date (),//min                . Date maxdate:new Date ($ ("#DateLimit"). Val ())//MAX date            });

2. Chinese

JQuery (function ($) {        $.datepicker.regional[' zh-cn ') = {            closetext: ' Off ',            Prevtext: ' < last month ',            Nexttext: ' Next month > ',            currenttext: ' Today ',            monthNames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ',                ' bodyguards ' ', ' November ', ' December '],            monthnamesshort: [' One ', ' two ', ' three ', ' four ', ' five ', ' Six ',                ' seven ', ' eight ', ' nine ', ' ten ', ' 11 ', ' 12 '],            dayNames: [ ' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ',            daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', day            Namesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '],            weekheader: ' Week ',            dateformat: ' Yy-mm-dd ',            firstday:1,            Isrtl:false,            showmonthafteryear:true,            yearsuffix: ' Year '        };        $.datepicker.setdefaults ($.datepicker.regional[' zh-cn ');    });

　　

Start Date (mindate) and end Date (maxdate)

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

$ (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

$ ("#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

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

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

JS 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

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.

jquery UI DatePicker Use