jquery Date Plug-in DatePicker use

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 Jquery-ui Compression package (you can choose to like the theme), which contains the support of DatePicker, of course, you can also site http://marcgrabanski.com/pages/code/ Jquery-ui-datepicker downloads 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.

<!--Introducing Styles css--> <link 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 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 a few months showbuttonpanel:true,//whether the button panel is displayed DateFormat: ' Yy-mm-dd ',//date format cleartext: "Clear",//Purge Date button name Closetext: "Off",//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 ',//MAX 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) {//Operation alert (SelectedDate) after the date of selection;}); }); --></mce:script>

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= " Content-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 <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 Styles css--> <link type=" text/css "rel=" stylesheet "href=" 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.ui.datepicker-zh-cn.js "type=" text/ JavaScript "></mce:script> <mce:script type=" Text/javascript ><!--//Waiting for the DOM element to complete loading. $ (function () {$ ("#selectDate"). DatePicker ({///Add Date selection feature numberofmonths:1,//display a few months showbuttonpanel:true,//whether the button panel is displayed DateFormat: ' Yy-mm-dd ',//date format cleartext: "Clear",//Purge Date button name Closetext: "Off",//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 ', ' '],//daynamesmin: [ ' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' Six ', Onselect:function (selectedDate) {//Operation alert (SelectedDate) after the selection date;}); }); --></mce:script> </HEAD> <BODY> <input type= "text" id= "selectdate" readonly= "readonly"/ > </BODY></HTML>

Note: Because of jquery DatePicker home http://marcgrabanski.com/articles/ Ui.core.js and Ui.datepicker.js are not the latest versions of the Jquery-ui-datepicker, and if you download a CSS file in a new version of jquery-ui-1.8.13 that causes 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.