JQuery is a very excellent scripting framework. Its rich controls are very simple to use and the configuration is very flexible. Below is an example of using the date plug-in datapicker.

1. Needless to say, download the jQuery core file. Datepicker is a lightweight plug-in. You only need the min version of jQuery. Then go to the official website http://jqueryui.com/downloadDownload the jquery-ui compressed package (you can choose your favorite theme), which contains support for datepicker. Of course, you can also download datepicker, including ui.core.js and ui.datepicker.js.

2. Reference the downloaded js file in HTML:

<!-- 引入 jQuery --> 
<mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery-1.5.1.min.js" type="text/javascript"></mce:script> 
<!--添加datepicker支持--> 
<mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script> 
<mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript">
</mce:script>

3. Introduce the default style sheet file into HTML, which is in the ui compressed package. If you download it from the official website, you can download this CSS file on the homepage, and you can also choose CSS for other skins.

 
<!--引入樣式css--> 
k type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" 
mce_href="css/jquery-ui-1.7.3.custom.css" />

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 type="text" id="selectDate" readonly="readonly"/>

5. Write js code to achieve the final effect.

$(document).ready(function() {   
   $('#selectDate').datepicker();   
 });

The effect is as follows:

Here is just a basic date control. We also need to display it in Chinese and limit the date selection range. Wait for the demand and slightly modify the js code:

<mce:script type="text/javascript"><!-- 
  //等待dom元素加載完畢. 
    $(function(){ 
      $("#selectDate").datepicker({//添加日期選擇功能 
      numberOfMonths:1,//顯示幾個月 
      showButtonPanel:true,//是否顯示按鈕面板 
      dateFormat: &#39;yy-mm-dd&#39;,//日期格式 
      clearText:"清除",//清除日期的按鈕名稱 
      closeText:"關(guān)閉",//關(guān)閉選擇框的按鈕名稱 
      yearSuffix: &#39;年&#39;, //年的后綴 
      showMonthAfterYear:true,//是否把月放在年的后面 
      defaultDate:&#39;2011-03-10&#39;,//默認日期 
      minDate:&#39;2011-03-05&#39;,//最小日期 
      maxDate:&#39;2011-03-20&#39;,//最大日期 
      monthNames: [&#39;一月&#39;,&#39;二月&#39;,&#39;三月&#39;,&#39;四月&#39;,&#39;五月&#39;,&#39;六月&#39;,&#39;七月&#39;,&#39;八月&#39;,&#39;九月&#39;,&#39;十月&#39;,&#39;十一月&#39;,&#39;十二月&#39;], 
      dayNames: [&#39;星期日&#39;,&#39;星期一&#39;,&#39;星期二&#39;,&#39;星期三&#39;,&#39;星期四&#39;,&#39;星期五&#39;,&#39;星期六&#39;], 
      dayNamesShort: [&#39;周日&#39;,&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;], 
      dayNamesMin: [&#39;日&#39;,&#39;一&#39;,&#39;二&#39;,&#39;三&#39;,&#39;四&#39;,&#39;五&#39;,&#39;六&#39;], 
      onSelect: function(selectedDate) {//選擇日期后執(zhí)行的操作 
        alert(selectedDate); 
      } 
      }); 
    }); 
    
// --></mce:script>

The effect is as follows:

This basically meets our needs. The datepicker control is in English by default. You can specify the Chinese display values ????of the month and day through the monthNames and dayNames attributes when constructing the datepicker. However, it is too troublesome to configure these attributes every time you use it. You can add a js file to configure all the Chinese values. Put it inside and quote it directly every time you use it. Here it is placed in jquery.ui.datepicker-zh-CN.js. The content is as follows:

jQuery(function($){ 
  $.datepicker.regional['zh-CN'] = { 
    closeText: '關(guān)閉', 
    prevText: '', 
    currentText: '今天', 
    monthNames: ['一月','二月','三月','四月','五月','六月', 
    '七月','八月','九月','十月','十一月','十二月'], 
    monthNamesShort: ['一','二','三','四','五','六', 
    '七','八','九','十','十一','十二'], 
    dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
    dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
    dayNamesMin: ['日','一','二','三','四','五','六'], 
    weekHeader: '周', 
    dateFormat: 'yy-mm-dd', 
    firstDay: 1, 
    isRTL: false, 
    showMonthAfterYear: true, 
    yearSuffix: '年'}; 
  $.datepicker.setDefaults($.datepicker.regional['zh-CN']); 
});

6. Introduce the Chinese plug-in into the page

<!-- 添加中文支持-->
  <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" 
  type="text/javascript"></mce:script>

The complete page code is as follows:

 
 
  
  
  
    
  
   
  
  
   
  
   
  
  
  
   
  
  <!-- 添加中文支持-->
  <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" 
  type="text/javascript"></mce:script> 
  
   
  
  
 <input type="text" id="selectDate" readonly="readonly"/> 
 
 

Note: Since ui.core.js and ui.datepicker.js on the jquery datepicker homepage are not the latest versions, if you download a new version of jquery The css file in -ui-1.8.13 will cause the date control to be unable to be displayed, so the UI of 1.7.3 is used here. The simpler way is to use jquery-ui to compress js.

The above is the entire content of this article. I will introduce you so much about the JQuery date plug-in datepicker. For more related content, please pay attention to the PHP Chinese website (www.miracleart.cn)!