How to Use the JQuery date plug-in datepicker _ jquery

This article describes in detail how to use the JQuery date plug-in datepicker. If you are interested, you can refer to JQuery as a very good script framework, its rich controls are easy to use and flexible to configure. The following is an example of using the date plug-in datapicker.

1. Download The jQuery core file. datepicker is a lightweight plug-in. You only need the jQuery min version. then download the jquery-uicompressed package from the official website http://jqueryui.com/download( you can select the theme you like ), it includes 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:

3. Introduce the default style sheet file in HTML, which is in the ui compressed package. If you download the CSS file from the official website, you can download the CSS file on the home page or select other skins.

 
 K type = "text/css" rel = "style sheet" href = "css/jquery-ui-1.8.13.custom.css" mce_href = "css/jquery-ui-1.7.3.custom.css"/>

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.

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, limit the date Selection Range and other requirements, slightly modify the js Code:

The effect is as follows:

This basically satisfies our needs. The datepicker control is in English by default. You can specify Chinese display values for months and days by using the monthNames and dayNames attributes when constructing a datepicker. However, it is too troublesome to configure these attributes every time you use them, you can add a js file to put the Chinese configuration in it. You can directly reference it each time, and put it in jquery. ui. datepicker-zh-CN.js, the content is as follows:

JQuery (function ($) {$. datepicker. regional ['zh-cn'] = {closeText: 'close', prevText: '', currentText: 'day', monthNames: ['August 11', 'August 11 ', 'October ', 'August 1'], monthNamesShort: ['yi', '2', '3', '4', '5', '6', '7', '8 ', '9', '10', '11', '12'], dayNames: ['sunday', 'monday', 'tuesday', 'weday', 'thurday ', 'Friday', 'saturday'], dayNamesShort: ['sunday', 'monday', 'tuesday', 'wedday', 'thurday', 'Friday ', 'saturday'], dayNamesMin: ['day', 'yi', '2', '3', '4', '5', '6'], weekHeader: 'Week', dateFormat: 'yy-mm-dd', firstDay: 1, isRTL: false, showMonthAfterYear: true, yearSuffix: 'Year'}; $. datepicker. setDefaults ($. datepicker. regional ['zh-cn']);});

6. Introduce the Chinese plug-in to the page

The complete page code is as follows:

     
   Datepicker       
   
      
   
    
   
    
     
   
      
   
      
 
  
          

Note: The ui on the jquery datepicker homepage. core. js and ui. datepicker. js is not the latest version, if you download the new version of the jquery-ui-1.8.13 In the css file will cause the date control can not be displayed, so here use 1.7.3 ui. Simply put, JavaScript is compressed using jquery-ui.

The above is all the content in this article. We will introduce so much about the JQuery date plug-in datepicker. For more information, please follow the PHP Chinese Network (www.php1.cn )!