jquery Date Plug-in DatePicker method of use _jquery

jquery is a very good scripting framework, and its rich controls are simple to use and very flexible to configure. Here is an example of using the date plugin Datapicker.

1, download the jquery core file, needless to say, DatePicker is a lightweight plug-in, just the min version of jquery on the line, and then to the official website http://jqueryui.com/download Download the Jquery-ui compression pack (you can choose a favorite theme), which contains support for DatePicker, and of course you can download DatePicker, including Ui.core.js and Ui.datepicker.js.

2, in the HTML reference download the JS file:

<!--the introduction of JQuery--> 
<mce:script src= "js/jquery.1.4.2.js" mce_src= "Js/jquery-1.5.1.min.js" type= JavaScript "></mce:script> 
<!--add DatePicker support--> 
<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 in HTML, which is in the UI compression package. If you download the website, the homepage has this CSS file download, you can also choose other skin CSS.

<!--introduce style css--> 
k type= "Text/css" rel= "stylesheet" href= "Css/jquery-ui-1.8.13.custom.css" mce_href= Jquery-ui-1.7.3.custom.css "/> 

4. Insert text fields in HTML, preferably set to read-only, do not accept user's manual input, prevent format confusion, with ID tag good.

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

5. Write JS code to achieve the final effect.

$ (document). Ready (function () {   
   $ (' #selectDate '). DatePicker ();   
 

The effect of the following figure:

Here just do a basic date control, we also need to display in Chinese, limit the range of date selection and other requirements, slightly modify the JS code:

<mce:script type= "Text/javascript" ><!-- 
  //Waiting for the DOM element to complete loading. 
    $ (function () { 
      $ ("#selectDate"). DatePicker ({///Add Date selection feature 
      numberofmonths:1,//display for several months 
      Showbuttonpanel: true,//whether to display the button panel 
      dateformat: ' Yy-mm-dd ',//date format 
      cleartext: "Clear",//Purge Date button name 
      closetext: "Off",// Close the button name of the selection box 
      Yearsuffix: ' Year ',//year suffix 
      showmonthafteryear:true,//whether to put the month behind the year 
      defaultdate: ' 2011-03-10 ', /default Date 
      mindate: ' 2011-03-05 ',//Minimum date 
      maxdate: ' 2011-03-20 ',//maximum date 
      monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December '], 
      daynames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '] 
      , Daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', 
      daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '], 
      Onselect:function (selectedDate) {//After the date of selection Operation 
        Alert (selectedDate);}} 
      ) 
    ; 
   

The effect is as follows:

This basically meets the needs of our use. The DatePicker control is in English by default, and you can specify the Chinese display value for the month and day by the MonthNames, DayNames properties when constructing DatePicker, but it's too much trouble to configure these properties every time you use it. Can add a JS file to the Chinese configuration are placed inside, each use of direct reference can be placed here in the Jquery.ui.datepicker-zh-cn.js, the contents are as follows:

JQuery (function ($) { 
  $.datepicker.regional[' zh-cn '] = { 
    closetext: ' Close ', 
    prevtext: ' < last month ', 
    Nexttext: ' Next month > ', 
    currenttext: ' Today ', 
    monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', 
    ' July ', ' August ', ' September ', ' October ', ' November ', ' December '], 
    monthnamesshort: [' One ', ' two ', ' three ', ' four ', ' five ', ' Six ', 
    ' seven ', ' eight ', ' nine ', ' ten ', ' 11 ', ' 12 '], 
    daynames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '], 
    daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '] 
    , Daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '], 
    weekheader: ' Zhou ', 
    dateformat: ' Yy-mm-dd ', 
    firstday:1, 
    Isrtl:false, 
    showmonthafteryear:true, 
    yearsuffix: ' Year '}; 
  $.datepicker.setdefaults ($.datepicker.regional[' ZH-CN ')); 

6. Introduce the Chinese plugin in the page

<!--add Chinese support--> 
  <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:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <meta http-equiv= "Conten T-type "content=" text/html; Charset=utf-8 "/> <TITLE> date control datepicker</title> <!--introduce jQuery--> <mce:script src=" JS /jquery.1.4.2.js "mce_src=" Js/jquery.1.4.2.js "type=" Text/javascript "></mce:script> <!-- Add DatePicker support--> <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> <!--or the introduction of the jquery UI package, which also includes support for DatePicker & Lt;mce:script src= "Js/jquery-ui-1.7.3.custom.min.js" mce_src= js/jquery-ui-1.7.3.custom.min.js "type=" text/ JavaScript "></mce:script>--> <!--introducing style css--> <link type=" text/css "rel=" stylesheet "href=" Css/jquery-ui-1.7.3.custom.css "mce_href=" css/jquery-ui-1.7.3. custom.css "/> <!--add Chinese support--> <mce:script src=" js/jquery.ui.datepicker-zh-cn.js "mce_src=" js/jquery.u I.datepicker-zh-cn.js "type=" Text/javascript "></mce:script> <mce:script type=" Text/javascript "> 
    <!--/wait for the DOM element to load complete. $ (function () {$ ("#selectDate"). DatePicker ({///Add Date selection feature numberofmonths:1,//display for several months showbuttonpanel:true,/ 
      /Whether to display the button panel DateFormat: ' Yy-mm-dd ',//date format cleartext: "Clear",//Purge Date button name Closetext: "Close",//Close the Selection box button name Yearsuffix: ' Year ',//year suffix showmonthafteryear:true,//whether to put the month behind the year Defaultdate: ' 2011-03-10 ',//default date MinDate : ' 2011-03-05 ',//Minimum date maxdate: ' 2011-03-20 ',//maximum date//monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ' , ' October ', ' November ', ' December '],//daynames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '],//daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '],//daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '], Onselect:function (selectedDate) {//SelectOperation Alert (selectedDate) executed after the date; 
    } 
      }); 
   
}); --></mce:script> </HEAD> <BODY> <input type= "text" id= "selectdate" readonly= "readonly"/&G 
 T 
 </BODY> </HTML>

Note: since jquery DatePicker the Ui.core.js and ui.datepicker.js on the home page are not the latest versions, and if you download a CSS file in a new version of jquery-ui-1.8.13 that can cause a problem that the date control cannot display, the 1.7.3 UI is used here. The simple point is to use Jquery-ui compression js.

The above is the entire content of this article, about the jquery date plug-in DatePicker for everyone to introduce so much, I hope to help you learn.