How to use the JQuery date plug-in datepicker

How to use the JQuery date plug-in datepicker_jquery

PHP中文网

Release： 2018-05-15 10:05:47

Original

3355 people have browsed it

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>

Copy after login

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" />

Copy after login

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"/>

Copy after login

5. Write js code to achieve the final effect.

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

Copy after login

The effect is as follows:

How to use the JQuery date plug-in datepicker_jquery

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>

Copy after login

The effect is as follows:

How to use the JQuery date plug-in datepicker_jquery

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[&#39;zh-CN&#39;] = { 
    closeText: &#39;关闭&#39;, 
    prevText: &#39;&#39;, 
    currentText: &#39;今天&#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;], 
    monthNamesShort: [&#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;], 
    weekHeader: &#39;周&#39;, 
    dateFormat: &#39;yy-mm-dd&#39;, 
    firstDay: 1, 
    isRTL: false, 
    showMonthAfterYear: true, 
    yearSuffix: &#39;年&#39;}; 
  $.datepicker.setDefaults($.datepicker.regional[&#39;zh-CN&#39;]); 
});

Copy after login

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>

Copy after login

The complete page code is as follows:

 
 
  
  
 日期控件datepicker 
    
  
   
  
  
   
  
   
  
  
  
   
  
  <!-- 添加中文支持-->
  <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"/>

Copy after login

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)!