Official address: Http://docs.jquery.com/UI/Datepicker, official example: http://jqueryui.com/demos/datepicker/。
A nice address for DIY JQuery UI interface effect site http://jqueryui.com/themeroller/
DatePicker Basic Use Method:
Copy Code code as follows:
<! DOCTYPE html>
<link href= "Http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel= "stylesheet" type = "Text/css"/>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>
<script src= "Http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("#datepicker"). DatePicker ();
});
</script>
<body style= "font-size:62.5%;" >
<div type= "text" id= "DatePicker" ></div>
</body>
The DatePicker supports the choice of the mouse-click Date, as well as keyboard control options:
Copy Code code as follows:
Page Up/down-Previous month, next month
Ctrl+page Up/down-last year, next year
Ctrl+home-the current month or last open date
Ctrl+left/right-Last day, next day
Ctrl+up/down-Last week, next week
Enter-determine the date of selection
Ctrl+end-closes and clears the dates that have been selected
Escape-closes and cancels the selection
Practical function:
Copy Code code as follows:
$.datepicker.setdefaults (Settings)-Global Set Date Select the parameters for the plug-in.
$.datepicker.formatdate (format, date, settings)-formatted date string for display
$.datepicker.iso8601week (date)-Give a date, indeed he is the first few weeks of the year
$.datepicker.parsedate (format, value, settings)-Get a date string in the specified format
Date format:
Copy Code code as follows:
D-Day ordinal of each month (without leading 0)
DD-Day of the month (two digits)
O-Days of the year (without leading 0)
OO-Day of the year (three digits)
D-Day name Short
Dd-day name Long
M-month (without leading 0)
MM-month (two digits)
M-month name Short
Mm-month name Long
Y-year (two digits)
YY-year (four digits)
@-Unix timestamp (starting from 01/01/1970)
' ... '-text
'-Single quotes
(Other)-text
Other standard date formats:
Copy Code code as follows:
ATOM-' yy-mm-dd ' (Same as RFC 3339/iso 8601)
Cookies-' D, dd M yy '
iso_8601-' yy-mm-dd '
rfc_822-' d, D M y '
rfc_850-' DD, dd-m-y '
rfc_1036-' d, D M y
Rfc_1123-' d, D M yy '
rfc_2822-' d, D M yy '
RSS-' d, D M y '
TIMESTAMP-' @ '
The consortium-' YY-MM-DD '
Parameters (parameter name: Parameter type: Default value)
Copy Code code as follows:
Altfield:string: '
Synchronizes the selected dates into another domain, with Altformat to display date strings in different formats.
Initial: $ ('. Selector '). DatePicker ({altfield: ' #actualDate '});
Get: var Altfield = $ ('. Selector '). DatePicker (' option ', ' Altfield ');
Set: $ ('. Selector '). DatePicker (' option ', ' Altfield ', ' #actualDate ');
Altformat:string: '
The date format that is displayed in another field when Altfield is set.
Initial: $ ('. Selector '). DatePicker ({altformat: ' Yy-mm-dd '});
Get: var Altformat = $ ('. Selector '). DatePicker (' option ', ' Altformat ');
Set: $ ('. Selector '). DatePicker (' option ', ' Altformat ', ' yy-mm-dd ');
Appendtext:string: '
Adds the specified string after the owning domain of the date plug-in.
Initial: $ ('. Selector '). DatePicker ({appendtext: ' (YYYY-MM-DD) '});
Get: var AppendText = $ ('. Selector '). DatePicker (' option ', ' appendtext ');
Set: $ ('. Selector '). DatePicker (' option ', ' AppendText ', ' (YYYY-MM-DD) ');
Buttonimage:string: '
Sets the picture of the pop-up button, if not null, the text of the button becomes the Alt property and is not displayed directly.
Initial: $ ('. Selector '). DatePicker ({buttonimage: '/images/datepicker.gif '});
Get: var buttonimage = $ ('. Selector '). DatePicker (' option ', ' buttonimage ');
Set: $ ('. Selector '). DatePicker (' option ', ' buttonimage ', '/images/datepicker.gif ');
ButtonImageOnly:Boolean:false
Set to True is the trigger without it appearing on a button.
Initial: $ ('. Selector '). DatePicker ({buttonimageonly:true});
Get: var buttonimageonly = $ ('. Selector '). DatePicker (' option ', ' buttonimageonly ');
Set: $ ('. Selector '). DatePicker (' option ', ' buttonimageonly ', true);
Buttontext:string: ' ... '
Sets the text content of the trigger button.
Initial: $ ('. Selector '). DatePicker ({buttontext: ' Choose '});
Get: var ButtonText = $ ('. Selector '). DatePicker (' option ', ' ButtonText ');
Set: $ ('. Selector '). DatePicker (' option ', ' ButtonText ', ' Choose ');
ChangeMonth:Boolean:false
setting allows you to select months from the Drop-down list.
Initial: $ ('. Selector '). DatePicker ({changemonth:true});
Get: var changemonth = $ ('. Selector '). DatePicker (' option ', ' changemonth ');
Set: $ ('. Selector '). DatePicker (' option ', ' Changemonth ', true);
ChangeYear:Boolean:false
setting allows you to select the year by Drop-down list.
Initial: $ ('. Selector '). DatePicker ({changeyear:true});
Get: var changeyear = $ ('. Selector '). DatePicker (' option ', ' changeyear ');
Set: $ ('. Selector '). DatePicker (' option ', ' changeyear ', true);
Closetexttype:stringdefault: ' Done '
Sets the text content of the Close button that needs to be displayed by setting the Showbuttonpanel parameter.
Initial: $ ('. Selector '). DatePicker ({closetext: ' X '});
Get: var Closetext = $ ('. Selector '). DatePicker (' option ', ' closetext ');
Set: $ ('. Selector '). DatePicker (' option ', ' closetext ', ' X ');
ConstrainInput:Boolean:true
If set to true, constrains the date format that is currently entered.
Initial: $ ('. Selector '). DatePicker ({constraininput:false});
Get: var constraininput = $ ('. Selector '). DatePicker (' option ', ' constraininput ');
Set: $ ('. Selector '). DatePicker (' option ', ' Constraininput ', false);
Currenttext:string: ' Today '
Sets the text content of the day button, which needs to be displayed by setting the Showbuttonpanel parameter.
Initial: $ ('. Selector '). DatePicker ({currenttext: ' Now '});
Get: var Currenttext = $ ('. Selector '). DatePicker (' option ', ' currenttext ');
Set: $ ('. Selector '). DatePicker (' option ', ' currenttext ', ' now ');
Dateformat:string: ' Mm/dd/yy '
Sets the display format for date strings.
Initial: $ ('. Selector '). DatePicker ({dateformat: ' Yy-mm-dd '});
Get: var DateFormat = $ ('. Selector '). DatePicker (' option ', ' DateFormat ');
Set: $ ('. Selector '). DatePicker (' option ', ' DateFormat ', ' yy-mm-dd ');
Daynames:array: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ']
Set the name of the day of the week, starting in Sunday. This content is displayed when DateFormat, and when the mouse is moved to the wardrobe in the calendar.
Initial: $ ('. Selector '). DatePicker ({daynames: [' dimanche ', ' Lundi ', ' Mardi ', ' mercredi ', ' jeudi ', ' vendredi ', ' samedi ']});
Get: var daynames = $ ('. Selector '). DatePicker (' option ', ' daynames ');
Set: $ ('. Selector '). DatePicker (' option ', ' daynames ', [' dimanche ', ' Lundi ', ' Mardi ', ' mercredi ', ' jeudi ', ' vendredi ', '] Samedi ']);
Daynamesmin:array: [' Su ', ' Mo ', ' Tu ', ' We ', ' Th ', ' Fr ', ' Sa ']
Sets the daily indent for a week, starting in Sunday, when this content is displayed for DateFormat, and the wardrobe in the previous calendar is displayed.
Initial: $ ('. Selector '). DatePicker ({daynamesmin: [' Di ', ' Lu ', ' Ma ', ' Me ', ' Je ', ' Ve ', ' Sa ']});
Get: var daynamesmin = $ ('. Selector '). DatePicker (' option ', ' daynamesmin ');
Set: $ ('. Selector '). DatePicker (' option ', ' daynamesmin ', [' Di ', ' Lu ', ' Ma ', ' Me ', ' Je ', ' Ve ', ' Sa ']);
Daynamesshort:array: [' Sun ', ' Mon ', ' Tue ', ' Wed ', ' Thu ', ' Fri ', ' Sat ']
Sets the daily indent for a week, starting in Sunday, when this content is displayed for DateFormat, and the wardrobe in the previous calendar is displayed.
Initial: $ ('. Selector '). DatePicker ({daynamesshort: [' Dim ', ' Lun ', ' Mar ', ' Mer ', ' jeu ', ' Ven ', ' Sam ']});
Get: var Daynamesshort = $ ('. Selector '). DatePicker (' option ', ' daynamesshort ');
Set: $ ('. Selector '). DatePicker (' option ', ' daynamesshort ', [' Dim ', ' Lun ', ' Mar ', ' Mer ', ' jeu ', ' Ven ', ' Sam ']);
Defaultdate:date, number, string:null.
Sets the date that is selected the first time the default load is displayed. Can be a Date object, or a number (from today, for example, +7), or a valid string (' Y ' stands for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').
Initial: $ ('. Selector '). DatePicker ({defaultdate: +7});
Get: var defaultdate = $ ('. Selector '). DatePicker (' option ', ' defaultdate ');
Set: $ ('. Selector '). DatePicker (' option ', ' defaultdate ', +7);
duration:string, Number: ' Normal '
Set the date control to expand the display time of the animation, optional is "slow", "normal", "fast", "the representative immediately, the number represents the number of milliseconds."
Initial: $ ('. Selector '). DatePicker ({duration: ' slow '});
Get: var duration = $ ('. Selector '). DatePicker (' option ', ' duration ');
Set: $ ('. Selector '). DatePicker (' option ', ' duration ', ' slow ');
firstday:number:0
Sets the first day of the week. Sunday is 0, Monday is 1, and so on.
Initial: $ ('. Selector '). DatePicker ({firstday:1});
Get: var FirstDay = $ ('. Selector '). DatePicker (' option ', ' firstday ');
Set: $ ('. Selector '). DatePicker (' option ', ' FirstDay ', 1);
GotoCurrent:Boolean:false
If set to true, when the day button is clicked, it is moved to the currently selected date instead of today.
Initial: $ ('. Selector '). DatePicker ({gotocurrent:true});
Get: var gotocurrent = $ ('. Selector '). DatePicker (' option ', ' gotocurrent ');
Set: $ ('. Selector '). DatePicker (' option ', ' gotocurrent ', true);
HideIfNoPrevNext:Boolean:false
Set to hide the corresponding button when there is no previous/next option. (default is not available)
Initial: $ ('. Selector '). DatePicker ({hideifnoprevnext:true});
Get: var Hideifnoprevnext = $ ('. Selector '). DatePicker (' option ', ' hideifnoprevnext ');
Set: $ ('. Selector '). DatePicker (' option ', ' Hideifnoprevnext ', true);
IsRTL:Boolean:false
If set to True, all text is from right to left.
Initial: $ ('. Selector '). DatePicker ({isrtl:true});
Get: var Isrtl = $ ('. Selector '). DatePicker (' option ', ' Isrtl ');
Set: $ ('. Selector '). DatePicker (' option ', ' Isrtl ', true);
Maxdate:date, number, string:null.
Set a maximum optional date. Can be a Date object, or a number (from today, for example, +7), or a valid string (' Y ' stands for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').
Initial: $ ('. Selector '). DatePicker ({maxdate: ' +1m +1w '});
Get: var maxdate = $ ('. Selector '). DatePicker (' option ', ' maxdate ');
Set: $ ('. Selector '). DatePicker (' option ', ' maxdate ', ' +1m +1w ');
$ ('. Selector '). DatePicker (' option ', ' maxdate ', ' 12/25/2012 ');
Mindate:date, number, string:null.
Set a minimum optional date. Can be a Date object, or a number (from today, for example, +7), or a valid string (' Y ' stands for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').
Initial: $ ('. Selector '). DatePicker ({mindate:new Date (2007, 1-1, 1)});
Get: var mindate = $ ('. Selector '). DatePicker (' option ', ' mindate ');
Set: $ ('. Selector '). DatePicker (' option ', ' mindate ', New Date (2007, 1-1, 1));
$ ('. Selector '). DatePicker (' option ', ' mindate ', ' 12/25/2012 ');
Monthnames:array: [' January ', ' February ', ' March ', ' April ', ' may ', ' June ', ' July ', ' August ', ' September ', ' October ', ' N Ovember ', ' December ']
Sets the name of all months.
Initial: $ ('. Selector '). DatePicker ({monthnames:[' Januar ', ' februar ', ' marts ', ' April ', ' Maj ', ' Juni ', ' Juli ', ' August ', ') ' September ', ' Oktober ', ' November ', ' December ']};
Get: var monthnames = $ ('. Selector '). DatePicker (' option ', ' monthnames ');
Set: $ ('. Selector '). DatePicker (' option ', ' monthnames ', [' Januar ', ' februar ', ' marts ', ' April ', ' Maj ', ' Juni ', ' Juli ', '] ' August ', ' September ', ' Oktober ', ' November ', ' December '];
Monthnamesshort:array: [' Out of the ', ' Feb ', ' Mar ', ' Apr ', ' may ', ' June ', ' o ', ' Aug ', ' Sep ', ' Oct ', ' Nov ', ' Dec ']
Sets the abbreviation for all months.
Initial: $ ('. Selector '). DatePicker ({monthnamesshort:[' out '), ' Feb ', ' Mar ', ' Apr ', ' Maj ', ' June ', ' the ', ', ' Aug ', ' Sep ', ' Okt ', ' Nov ', ' Dec ']};
Get: var Monthnamesshort = $ ('. Selector '). DatePicker (' option ', ' monthnamesshort ');
Set: $ ('. Selector '). DatePicker (' option ', ' monthnamesshort ', [' the '], ' Feb ', ' Mar ', ' Apr ', ' Maj ', ' June ', ' the ', ', ' Aug ', ' Sep ' , ' Okt ', ' Nov ', ' Dec ']);
NavigationAsDateFormat:Boolean:false
If set to True, the FormatDate function will be applied to the values in Prevtext,nexttext and currenttext, such as the month name.
Initial: $ ('. Selector '). DatePicker ({navigationasdateformat:true});
Get: var Navigationasdateformat = $ ('. Selector '). DatePicker (' option ', ' Navigationasdateformat ');
Set: $ ('. Selector '). DatePicker (' option ', ' Navigationasdateformat ', true);
Nexttext:string: ' Next '
Sets the display text for the next month link.
Initial: $ ('. Selector '). DatePicker ({nexttext: ' later '});
Get: var Nexttext = $ ('. Selector '). DatePicker (' option ', ' nexttext ');
Set: $ ('. Selector '). DatePicker (' option ', ' Nexttext ', ' later ');
Numberofmonths:number, Array:1
Set how many months to display at a time. If it is an integer, the number of months is displayed and, if it is an array, the number of rows and columns displayed.
Initial: $ ('. Selector '). DatePicker ({numberofmonths: [2, 3]});
Get: var numberofmonths = $ ('. Selector '). DatePicker (' option ', ' numberofmonths ');
Set: $ ('. Selector '). DatePicker (' option ', ' numberofmonths ', [2, 3]);
Prevtext:string: ' Prev '
Sets the display text for the "last month" link.
Initial: $ ('. Selector '). DatePicker ({prevtext: ' earlier '});
Get: var Prevtext = $ ('. Selector '). DatePicker (' option ', ' prevtext ');
Set: $ ('. Selector '). DatePicker (' option ', ' Prevtext ', ' earlier ');
shortyearcutoff:string, Number: ' +10 '
Sets the value of the cutoff year. If the number (0-99) starts with the current year, if it is a string, it is converted to a number and then added to the current year. When the cut-off year is exceeded, it is considered to be the last century.
Initial: $ ('. Selector '). DatePicker ({shortyearcutoff:50});
Get: var Shortyearcutoff = $ ('. Selector '). DatePicker (' option ', ' Shortyearcutoff ');
Set: $ ('. Selector '). DatePicker (' option ', ' Shortyearcutoff ', 50);
Showanim:string: ' Show '
Sets the name of the animation that displays and hides the date plug-in.
Initial: $ ('. Selector '). DatePicker ({showanim: ' fold '});
Get: var Showanim = $ ('. Selector '). DatePicker (' option ', ' Showanim ');
Set: $ ('. Selector '). DatePicker (' option ', ' Showanim ', ' fold ');
ShowButtonPanel:Boolean:false
Sets whether the related buttons are displayed on the panel.
Initial: $ ('. Selector '). DatePicker ({showbuttonpanel:true});
Get: var Showbuttonpanel = $ ('. Selector '). DatePicker (' option ', ' Showbuttonpanel ');
Set: $ ('. Selector '). DatePicker (' option ', ' Showbuttonpanel ', true);
showcurrentatpos:number:0
Sets the location where the current month is displayed when multiple months are displayed. Start x bit from top/left.
Initial: $ ('. Selector '). DatePicker ({showcurrentatpos:3});
Get: var Showcurrentatpos = $ ('. Selector '). DatePicker (' option ', ' Showcurrentatpos ');
Set: $ ('. Selector '). DatePicker (' option ', ' Showcurrentatpos ', 3);
ShowMonthAfterYear:Boolean:false
Whether the month is displayed after the head year of the panel.
Initial: $ ('. Selector '). DatePicker ({showmonthafteryear:true});
Get: var showmonthafteryear = $ ('. Selector '). DatePicker (' option ', ' showmonthafteryear ');
Set: $ ('. Selector '). DatePicker (' option ', ' showmonthafteryear ', true);
Showon:string: ' Focus '
Set what event triggers the Display date plugin panel, optional value: Focus, Button, both
Initial: $ ('. Selector '). DatePicker ({showon: ' both '});
Get: var Showon = $ ('. Selector '). DatePicker (' option ', ' Showon ');
Set: $ ('. Selector '). DatePicker (' option ', ' Showon ', ' both ');
Showoptions:options: {}
If you use Showanim to display animation effects, you can add some additional parameter settings by using this parameter.
Initial: $ ('. Selector '). DatePicker ({showoptions: {direction: ' up '});
Get: var showoptions = $ ('. Selector '). DatePicker (' option ', ' showoptions ');
Set: $ ('. Selector '). DatePicker (' option ', ' showoptions ', {direction: ' Up ');
ShowOtherMonths:Boolean:false
Whether the number of dates (not optional) is displayed on the current panel for the next two months.
Initial: $ ('. Selector '). DatePicker ({showothermonths:true});
Get: var showothermonths = $ ('. Selector '). DatePicker (' option ', ' showothermonths ');
Set: $ ('. Selector '). DatePicker (' option ', ' showothermonths ', true);
Stepmonths:number:1
When clicked on/Next January, turn over a few months.
Initial: $ ('. Selector '). DatePicker ({stepmonths:3});
Get: var stepmonths = $ ('. Selector '). DatePicker (' option ', ' stepmonths ');
Set: $ ('. Selector '). DatePicker (' option ', ' stepmonths ', 3);
Yearrange:string: ' -10:+10 '
Control the number of years displayed in the Drop-down list for the year, either relative to the current year (-NN:+NN) or absolute (-nnnn:+nnnn)
Initial: $ ('. Selector '). DatePicker ({yearrange: ' 2000:2010 '});
Get: var Yearrange = $ ('. Selector '). DatePicker (' option ', ' yearrange ');
Set: $ ('. Selector '). DatePicker (' option ', ' yearrange ', ' 2000:2010 ');
Event
Copy Code code as follows:
Beforeshow:function (Input)
Triggers this event before the date control displays the panel, and returns the instance object of the control that is currently triggering the event.
Initial: $ ('. Selector '). DatePicker ({beforeshow:function (input) {...}});
Beforeshowday:function (date)
This event is triggered by date binding on each panel before the date control displays the panel, which is the date on which the event was triggered. After calling the function, you must return an array: [0] This date is optional (True/false), [1] The CSS style name for this date ("" is the default), [2] When the mouse is moved to the contents of the hint.
Initial: $ ('. Selector '). DatePicker ({beforeshowday:function (date) {...}});
Onchangemonthyear:function (year, month, inst)
This event is triggered when the current year or month changes, and the parameter is an instance of the changed year month and the date plug-in.
Initial: $ ('. Selector '). DatePicker ({onchangemonthyear:function (year, month, inst) {...}});
Onclose:function (Datetext, inst)
This event is triggered when the date panel is closed (regardless of whether there is a selection date), and the parameter is the selected date and the current date plug-in instance.
Initial: $ ('. Selector '). DatePicker ({onclose:function (Datetext, inst) {...}});
Onselect:function (Datetext, inst)
This event is triggered when a date is selected in the date panel, and the parameter is an instance of the plug-in for the selected date and current date.
$ ('. Selector '). DatePicker ({onselect:function (Datetext, inst) {...}});
Method:
Copy Code code as follows:
Destory
Removes drag-and-drop functionality from the element.
Usage:. DatePicker (' Destroy ')
Disable
Disables drag-and-drop functionality for elements.
Usage:. DatePicker (' disable ')
Enable
Enables drag-and-drop functionality for elements.
Usage:. DatePicker (' Enable ')
Option
Gets or sets the parameters of the element.
Usage:. DatePicker (' option ', Optionname, [value])
Dialog
Open a Date plug-in in the dialog plug-in.
Usage:. DatePicker (' dialog ', Datetext, [onselect], [Settings], [POS])
Isdisabled
The exact date plugin has been disabled.
Usage:. DatePicker (' isdisabled ')
Hide
The date panel that was opened before it was hidden (closed).
Usage:. DatePicker (' hide ', [speed])
Show
. DatePicker (' show ')
Displays the date plugin.
Usage:. DatePicker (' show ')
GetDate
Returns the date that the current date plug-in selected.
Usage:. DatePicker (' getDate ')
Setdate
Sets the date plug-in's current date. The date argument can be a number (from today, for example, +7), or a valid string (' Y ' for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d '), and null for that day.
Usage:. DatePicker (' setdate ', date)
the usage explanation of Jquery-ui-datepicker
1: First in the page to introduce the relevant JS, note that the introduction order can not be wrong
Jquery-1.4.2.min.js
Jquery-ui.min.js
Jquery.ui.datepicker.min.js
Jquery.ui.datepicker-zh-cn.min.js
Jquery.ui.datepicker-fr.min.js
.... And so on, language packs (what to join)
Note: The DatePicker default is set in the last sentence of the language pack localization
Similar to this sentence: SetDefaults (... regional[...])
Therefore, if the page DatePicker no longer set itself, the lack of capital to the last introduction of the language pack localization prevail.
2: page Example
The annotations are already clear, DatePicker's official documentation for option setting is init DatePicker, then setter or getter
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
$ ("#datepicker"). DatePicker (...); /representative with ... Property directly executes the Create DatePicker ()
You must first init DatePicker to set the DatePicker option again
$ ("#datepicker"). DatePicker (' option ',...,...); /representative Set DatePicker ... Property value of ..., but does not execute create datepicker ();
$.datepicker.setdefaults ($.datepicker.regional[' ZH-CN '));
$.datepicker.setdefaults ($.datepicker.regional['])//First clear the language pack regional
$ ("#datepicker"). DatePicker ();
$ ("#datepicker"). DatePicker (' option ', $.datepicker.regional[' ZH-CN '));
$ ("#datepicker"). DatePicker ($.datepicker.regional[' ZH-CN ');//The execution of the sentence fails because there is a $ ("#datepicker"). DatePicker ();
$ ("#datepicker"). DatePicker (' option ', ' DateFormat ', ' yy-mm-dd ');//set DateFormat
var DateFormat = $ ("#datepicker"). DatePicker ("option", "DateFormat");//get DateFormat
$ ("#datepicker"). DatePicker (' option ', {dateformat: ' Yy-mm-dd '});//set DateFormat
});
</script>
<body>
<!--div id= "DatePicker" ></div-->
<input id= "DatePicker" type= "text"/>
</body>
