Detailed explanation of jQuery calendar plug-in datepicker usage_jquery

jQuery is a rare and excellent JavaScript script development library, and many plug-ins based on it are also very standardized and excellent. It would be a pity to miss this beauty, such as the datepicker plug-in.

Generally, the front end of the MIS system, especially the user registration page, will have a date input box such as "month and year of birth". The simplest way is to use an tag to do this There are many disadvantages: firstly, the matching with the database field type, secondly, the legality of the input date such as "13th month" or leap year, etc. If we go deeper, there are many places worthy of consideration. The currently popular approach is to use drop-down menus, but this approach is unsatisfactory in terms of interactivity, complexity and portability, because At least three linked drop-down menus need to be built, and a large number of scripts need to be written to handle date validity.

Datepicker brings wonderful spring, let’s take a look at how it looks when using the default style:

Completely GUI-like user experience, dazzling dynamic display effects, precise date control and highly flexible parameter configuration, all of which make datepicker favored by many developers, including the famous Google, in its Google Calendar project This script is used in . If you are interested, you can check it out. By the way, the default effect in the picture above can be achieved by writing a sentence in javascript. How about it? If you are excited, follow me:

1. Needless to say, download the jQuery core file. Datepicker is a lightweight plug-in. You only need the min version of jQuery. Then download datepicker (including jQuery1.2.6_min). You can also download it from the official website. : http://marcgrabanski.com/pages/code/jquery-ui-datepicker.

2. Quote the two downloaded 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. Introduce the default style sheet file into HTML. This file is also in the compressed package just now. If you download it from the official website, you can download this CSS file on the homepage. You can also choose CSS for other skins:

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

4. Insert a text field in HTML. It is best to set it to read-only and not accept manual input from users to prevent formatting confusion. Mark it with an id.

<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 it is in English. According to different MIS systems, some target groups are older users. It is recommended to change the interface to Chinese. You can do this with a few changes. The function just now, like this:

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker({ 
  dateFormat: 'yy-mm-dd', //日期格式，自己设置
  buttonImage: 'calendar.gif', //按钮的图片路径，自己设置
  buttonImageOnly: true, //Show an image trigger without any button.
  showOn: 'both',//触发条件，both表示点击文本域和图片按钮都生效
 yearRange: '1990:2008',//年份范围
 clearText:'清除',//下面的就不用详细写注释了吧，呵呵，都是些文本设置
 closeText:'关闭',
 prevText:'前一月',
 nextText:'后一月',
 currentText:' ',
 monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 }); 
 }); 
</script>

OK, you’re done. The code of the page I wrote according to my own requirements is as follows. It is for reference only. Try it yourself:

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>



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

The above is a detailed introduction to the usage of the jQuery calendar plug-in datepicker. I hope it will be helpful to everyone's learning.