JQuery DatePicker Date Selection plugin usage details

1. Download the jquery core file Needless to say, DatePicker is a lightweight plug-in, just the min version of jquery, and then download DatePicker (containing jquery1.2.6_min), you can also download to the official website: http:// Marcgrabanski.com/pages/code/jquery-ui-datepicker.

2. Reference downloaded two JS in HTML:

The code is as follows	Copy Code
<script language= "javascript" src= "Js/jquery-1.2.6.min.js" ></script> <script language= "javascript" src= "Js/ui.datepicker.js" ></script>

3. The introduction of the default style sheet file in HTML, this file is also just the compression package, if the website download, the homepage has this CSS file download, you can choose other skin CSS:

The code is as follows	Copy Code
<link rel= "stylesheet" href= "Js/ui.datepicker.css" type= "text/css" media= "screen" title= "core CSS file" charset= " Utf-8 "/>

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.

The code is as follows	Copy Code
<input id= "Dateinput" type= "text" readonly= "readonly"/>

5. Write JS code to achieve the final effect.

The code is as follows	Copy Code
<script language= "JavaScript" > $ (document). Ready (function () { $ (' #dateinput '). DatePicker (); }); </script>

Show Today and OK button

The code is as follows	Copy Code
$ (". DP"). DatePicker ({showbuttonpanel:true});

You can also set the Calendar view of the current month by clicking Today:

The code is as follows	Copy Code
$ (". DP"). DatePicker ({showbuttonpanel:true, gotocurrent:true});

Format input

Define Mask Format:

The code is as follows	Copy Code
$ (". DP"). DatePicker (). Setmask ("9999-19-39")

This basically completes a date input text field, but is English, according to the different MIS system, some target crowd is the grade user, proposed the interface change into Chinese

The code is as follows

Copy Code

JQuery (function ($) { $.datepicker.regional[' Zh-hans '] = $.datepicker.regional[' zh_cn '] = { Closetext: ' Close ', Prevtext: ' & #x3c; last month ', Nexttext: ' next month & #x3e; ', 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["<?php Echo Defined" (' Icl_language_code ')? Icl_language_code:wplang;? > "]); });

Control Date Range
Set the date range that can be selected by Mindate/maxdate, which can be the date type;

or a specific format, using three characters to indicate:

1. The first character is + or-
2. The second character is a number
3. The third character indicates that the unit such as Y,m,w,d the year, month, week, day, can spell out the results of n such as: "+1y" " -1m"
4. And can overlay, as long as the middle space can be separated as follows: "+1m +1w +2d" means one months + a week + two days

The code is as follows	Copy Code
$ (". DP"). DatePicker ({maxdate: "+1m +1w +1d", MinDate: " -1d"}); $ (". DP"). DatePicker ({maxdate:new date (2012,12,21), mindate:new date (2012,12,08)});