Detailed description of jquery plug-in datepicker

Jquery is a rare and excellent Javascript script development library, and many plug-ins based on it are also very standard and excellent. If you miss this beautiful scenery, it would be a pity, for example, datepicker.
Generally, the front-end of the MIS system, especially the user registration page, will have a date input box such as "Year of birth, the simplest way is to use a <input type = "text"/> label, which has many drawbacks: the first is the matching with the database field type, and the second is the validity of the input date, such as "13 months" or a leap year. If you go deeper, there are still many issues worth further consideration. Currently, the most popular method is to use the drop-down menu <SELECT> <option> </SELECT> to construct a structure. However, this method is not satisfactory regardless of interactivity, complexity, and portability, because at least three linked drop-down menus need to be built, you need to write a large number of scripts to process date legitimacy.
Datepicker brings beautiful spring. Let's see what it looks like when using the default style:

datepicker is favored by many developers for its completely Gui-like user experience, dazzling Dynamic Display Effect, precise date control, and highly flexible parameter configuration, this includes the well-known Google, which uses this script in its Google Calendar project. If you are interested, you can check it out. By the way, the default effect is that in Javascript, users only need to write one sentence to achieve it. How can this problem be solved? Follow me:
1. download the jquery core file. datepicker is a lightweight plug-in. You only need to download the jquery min version, and then download datepicker (containing jquery1.2.6 _ min ), you can also download it from the official website: http://marcgrabanski.com/pages/code/jquery-ui-datepicker.
2. reference the two downloaded JS files in HTML:

1. <Script Language="JavaScript" SRC=JS/jquery-1.2.6.min.js"></Script>
2. <Script Language="JavaScript" SRC="JS/UI. datepicker. js"></Script>

3. introduce the default style sheet file in HTML. This file is also in the compressed package. If you download the file from the official website, the CSS file will be downloaded on the homepage. You can also select CSS for other skins:

1. <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. It is best to set them to read-only and do not accept manual input from users. This prevents format confusion and marks them with IDs.

1. <Input ID="Dateinput" Type="Text" Readonly="Readonly"/>

5. Compile JSCodeTo achieve the final effect.

1. <Script language ="JavaScript">
2. $ (Document). Ready (Function(){
3. $ ('# Dateinput'). Datepicker ();
4. });
5. </SCRIPT>

In this way, a text field of Date input is basically completed, but it is in English. According to different MIS systems, some target users are grade users. We recommend that you change the interface to Chinese, you can perform this operation by slightly modifying the function just now, like this:

2. <Script language ="JavaScript">
4. $ (Document). Ready (function (){
6. $ ('# Dateinput'). Datepicker ({
8. Dateformat:'Yy-mm-dd',// Date Format, set by yourself
10. Buttonimage:'Calendar.gif',// Set the image path of the button
12. Buttonimageonly:True,// Show an image trigger without any button.
14. Showon:'Both',// Trigger condition. Both indicates that clicking the text field and image button take effect.
16. Yearrange:'2017: 66661',// Year range
18. Cleartext:'Clear',// Do not write comments in detail below.
20. Closetext:'Close',
22. Prevtext:'October 11',
24. Nexttext:'August 11',
26. Currenttext:'',
28. Monthnames :['August 11','August 11','August 11','August 11','August 11','August 11','August 11','August 11','August 11','August 11','August 11','August 11'],
30. });
32. });
34. </SCRIPT>

OK. As a result, I wrote the following page code as per my requirements. It is for your reference only. Please try it yourself:

2. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <Html Xmlns=Http://www.w3.org/1999/xhtml">
6. <Head>
8. <Meta HTTP-equiv="Content-Type" Content="Text/html; charset = UTF-8" />
10. <Title>Untitled document</Title>
12. link rel = "stylesheet" href = "JS/ui.datepicker.css" type = " text/CSS " media = " screen" title = "core CSS file" charset = "UTF-8" />
14. <Script Language="JavaScript" SRC=JS/jquery-1.2.6.min.js"></Script>
16. <Script Language="JavaScript" SRC="JS/UI. datepicker. js"></Script>
18. <Script Language="JavaScript">
20. $ (Document). Ready (function (){
22. VaRYearfrom=NewDate (). getyear ()-60 + 1900;
24. VaRYearto=NewDate (). getyear ()-18 + 1900;
26. $ ('# Dateinput'). datepicker ({
28. Dateformat: 'yy-mm-dd ',
30. Buttonimage: 'calendar.gif ',
32. Buttonimageonly: True,
34. Showon: 'both ',
36. Yearrange: yearfrom + ':' + yearto,
38. Cleartext: 'clear ',
40. Closetext: 'close ',
42. Prevtext: 'August 11 ',
44. Nexttext: 'August 11 ',
46. Currenttext :'',
48. Monthnames ', 'August 11', 'August 11', 'August 11'],
50. });
52. });
54. </Script>
56. </Head>
58. <Body>
60. <Input ID="Dateinput" Type="Text" Readonly="Readonly"/>
62. </Body>
64. </Html>