jquery Date Plugin

jquery is a very good scripting framework, and its rich controls are very 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 Compressed package (you can choose your favorite theme), it contains support for 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. Refer to the downloaded JS file in HTML:

<!--Introducing JQuery -    <Mce:scriptsrc= "Js/jquery.1.4.2.js"mce_src= "Js/jquery-1.5.1.min.js"type= "Text/javascript"></Mce:script>    <!--Add DatePicker support -    <Mce:scriptsrc= "Js/jquery.ui.core.js"mce_src= "Js/jquery.ui.core.js"type= "Text/javascript"></Mce:script>    <Mce:scriptsrc= "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 downloaded on the official website, the homepage will have this CSS file download, but also choose other skin CSS.

<!-- Introducing Style CSS  -    <  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 formatting confusion, and mark it with ID.

<type= "text"  ID= "Selectdate"  readonly= " ReadOnly "/>

5. Write the JS code to achieve the final result.

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

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

<Mce:scripttype= "Text/javascript"><!--//wait for DOM element to load. $ (function () {$ ("#selectDate"). DatePicker ({//Add date selection function numberofmonths:1,//display several months Showbutton panel:true,//whether the button panel is displayed dateformat: ' Yy-mm-dd ',//date format cleartext: "Clear",//Clear 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 Defaultdat  E: ' 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 '            , ' VI ', onselect:function (selectedDate) {//Select the Operation alert (selectedDate) after the date;        }            });    }); //  -</Mce:script>

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

JQuery (function ($) {    $.datepicker.regional[' zh-cn ') = {        closetext: ' Off ',        prevtext: '<  last month '        ,' 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: ' Week ',        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  -    <  src= "Js/jquery.ui.datepicker-zh-cn.js"  mce_src= "js/ Jquery.ui.datepicker-zh-cn.js "  type=" Text/javascript "></MCE: Script>

The full page code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en"><HTML> <HEAD> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />  <TITLE>Date control DatePicker</TITLE>        <!--Introducing JQuery -    <Mce:scriptsrc= "Js/jquery.1.4.2.js"mce_src= "Js/jquery.1.4.2.js"type= "Text/javascript"></Mce:script>    <!--Add DatePicker support -    <Mce:scriptsrc= "Js/jquery.ui.core.js"mce_src= "Js/jquery.ui.core.js"type= "Text/javascript"></Mce:script>    <Mce:scriptsrc= "Js/jquery.ui.datepicker.js"mce_src= "Js/jquery.ui.datepicker.js"type= "Text/javascript"></Mce:script>    <!--or introduce a 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 Style CSS -    <Linktype= "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:scriptsrc= "Js/jquery.ui.datepicker-zh-cn.js"mce_src= "Js/jquery.ui.datepicker-zh-cn.js"type= "Text/javascript"></Mce:script>    <Mce:scripttype= "Text/javascript"><!-- -</Mce:script> </HEAD> <BODY>  <inputtype= "text"ID= "Selectdate"ReadOnly= "ReadOnly"/> </BODY></HTML>

Note: Because of jquery DatePicker home http://marcgrabanski.com/articles/ Jquery-ui-datepicker on Ui.core.js and ui.datepicker.js are not the latest version, if the download of the new version of the jquery-ui-1.8.13 CSS file will cause the date control can not display the problem, so the 1.7.3 UI is used here. A simple point is to use Jquery-ui compression js.

jquery Date Plugin