How to use the JQuery date plug-in datepicker_jquery

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:"关闭",//关闭选择框的按钮名称 
      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) {//选择日期后执行的操作 
        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: '关闭', 
    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.php.cn)!