jquery Calendar Plugin DatePicker usage _jquery

jquery is a rare and very good JavaScript script development library, and based on many of its plug-ins are very normative and excellent, if miss this beautiful scenery is a shame, such as DatePicker this plugin.

General MIS system front-end, especially the user registration page, there will be such as "born year" date input box, the simplest way is to use a <input type= "text"/> tag, there are many disadvantages: first, with the database field type matching, The second is to enter the legality of the date such as "1 March" or a leap year, and so on, if there are a lot of places worthy of scrutiny. The current popular practice is to use the drop down menu <select><option></option></select> to construct, but in this way, regardless of interactivity, complexity and portability are not satisfactory, Because at least 3 linkage drop-down menus need to be built, it is necessary to write a large number of scripts to deal with the date of legality.

DatePicker brings a beautiful spring, first look at what it looks like when you use the default style:

The full GUI-like user experience, dazzling dynamic rendering, precise date control and highly flexible parameter configuration all make DatePicker popular with many developers, including the famous Google, which is used in its Google Calendar program , interested can go to see. By the way, the default effect of the above figure, in JavaScript, the user only need to write a word can be achieved, how, echocardiography, follow me:

1. Download the jquery core file Needless to say, DatePicker is a lightweight plug-in, just the min version of jquery, and then download DatePicker (containing jquery1.2.6_min), you can also download to the official website: http:// Marcgrabanski.com/pages/code/jquery-ui-datepicker.

2. Reference downloaded two JS in HTML:

<script language= "javascript" src= "Js/jquery-1.2.6.min.js" ></script>
<script language= " JavaScript "src=" Js/ui.datepicker.js ></script>

3. The introduction of the default style sheet file in HTML, this file is also just the compression package, if the website download, the homepage has this CSS file download, you can choose other skin CSS:

<link rel= "stylesheet" href= "Js/ui.datepicker.css" type= "text/css" media= "screen" title= "core CSS file" charset= " Utf-8 "/>

4. Insert text fields in HTML, preferably set to read-only, do not accept user's manual input, prevent format confusion, with ID tag good.

<input id= "Dateinput" type= "text" readonly= "readonly"/>

5. Write JS code to achieve the final effect.

<script language= "JavaScript" >
$ (document). Ready (function () { 
 $ (' #dateinput '). DatePicker (); 
</script>

This basically completes a date input text field, but is English, according to the different MIS system, some target crowd is the grade user, proposed the interface to change into Chinese, can so operate, slightly changes just the function, like this:

<script language= "JavaScript" >
$ (document). Ready (function () { 
 $ (' #dateinput '). DatePicker ({ 
  DateFormat: ' Yy-mm-dd ',//date format, set yourself
  buttonimage: ' calendar.gif ',//button's picture path, set yourself
  buttonimageonly:true,// Show a image trigger without any button.
  Showon: ' Both ',//trigger conditions, both said click the Text field and Picture buttons are effective
 yearrange: ' 1990:2008 ',//year range
 cleartext: ' Clear ',//The following will not have to write a detailed comment on it, Oh, are some text settings
 closetext: ' Close ',
 prevtext: ' Previous month ',
 nexttext: ' After January ',
 currenttext: ',
 monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December '],
 }}); 
</script>

OK, finished, I according to their own requirements, write the page code as follows, only for reference, try it yourself:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The above is about the jquery calendar plug-in datepicker usage in detail, I hope to help you learn.