官方地址：http://docs.jquery.com/ui/datepicker，官方示例： http://jqueryui.com/demos/datepicker/。
一个不错的地址，用来diy jquery ui界面效果的站点http://jqueryui.com/themeroller/
datepicker基本使用方法：
复制代码 代码如下:
datepicker支持鼠标点选日期，同时还可以通过键盘控制选择：
复制代码 代码如下:
page up/down - 上一月、下一月
ctrl+page up/down - 上一年、下一年
ctrl+home - 当前月或最后一次打开的日期
ctrl+left/right - 上一天、下一天
ctrl+up/down - 上一周、下一周
enter - 确定选择日期
ctrl+end - 关闭并清除已选择的日期
escape - 关闭并取消选择
实用功能：
复制代码 代码如下:
$.datepicker.setdefaults( settings ) - 全局设置日期选择插件的参数.
$.datepicker.formatdate( format, date, settings ) - 格式化显示的日期字符串
$.datepicker.iso8601week( date ) - 给出一个日期，确实他是一年中的第几周
$.datepicker.parsedate( format, value, settings ) - 按照指定格式获取日期字符串
日期格式：
复制代码 代码如下:
d - 每月的第几天 (没有前导零)
dd - 每月的第几天 (两位数字)
o - 一年中的第几天 (没有前导零)
oo - 一年中的第几天 (三位数字)
d - day name short
dd - day name long
m - 月份 (没有前导零)
mm - 月份 (两位数字)
m - month name short
mm - month name long
y - 年份 (两位数字)
yy - 年份 (四位数字)
@ - unix 时间戳 (从 01/01/1970 开始)
'...' - 文本
'' - 单引号
（其它） - 文本
其它标准日期格式:
复制代码 代码如下:
atom - 'yy-mm-dd' (same as rfc 3339/iso 8601)
cookie - '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 - '@'
w3c - 'yy-mm-dd'
参数（参数名 : 参数类型 : 默认值）
复制代码 代码如下:
altfield : string : ''
将选择的日期同步到另一个域中，配合altformat可以显示不同格式的日期字符串。
初始：$('.selector').datepicker({ altfield: '#actualdate' });
获取：var altfield = $('.selector').datepicker('option', 'altfield');
设置：$('.selector').datepicker('option', 'altfield', '#actualdate');
altformat : string : ''
当设置了altfield的情况下，显示在另一个域中的日期格式。
初始：$('.selector').datepicker({ altformat: 'yy-mm-dd' });
获取：var altformat = $('.selector').datepicker('option', 'altformat');
设置：$('.selector').datepicker('option', 'altformat', 'yy-mm-dd');
appendtext : string : ''
在日期插件的所属域后面添加指定的字符串。
初始：$('.selector').datepicker({ appendtext: '(yyyy-mm-dd)' });
获取：var appendtext = $('.selector').datepicker('option', 'appendtext');
设置：$('.selector').datepicker('option', 'appendtext', '(yyyy-mm-dd)');
buttonimage : string : ''
设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示。
初始：$('.selector').datepicker({ buttonimage: '/images/datepicker.gif' });
获取：var buttonimage = $('.selector').datepicker('option', 'buttonimage');
设置：$('.selector').datepicker('option', 'buttonimage', '/images/datepicker.gif');
buttonimageonly : boolean : false
set to true to place an image after the field to use as the trigger without it appearing on a button.
初始：$('.selector').datepicker({ buttonimageonly: true });
获取：var buttonimageonly = $('.selector').datepicker('option', 'buttonimageonly');
设置：$('.selector').datepicker('option', 'buttonimageonly', true);
buttontext : string : '...'
设置触发按钮的文本内容。
初始：$('.selector').datepicker({ buttontext: 'choose' });
获取：var buttontext = $('.selector').datepicker('option', 'buttontext');
设置：$('.selector').datepicker('option', 'buttontext', 'choose');
changemonth : boolean : false
设置允许通过下拉框列表选取月份。
初始：$('.selector').datepicker({ changemonth: true });
获取：var changemonth = $('.selector').datepicker('option', 'changemonth');
设置：$('.selector').datepicker('option', 'changemonth', true);
changeyear : boolean : false
设置允许通过下拉框列表选取年份。
初始：$('.selector').datepicker({ changeyear: true });
获取：var changeyear = $('.selector').datepicker('option', 'changeyear');
设置：$('.selector').datepicker('option', 'changeyear', true);
closetexttype: stringdefault: 'done'
设置关闭按钮的文本内容，此按钮需要通过showbuttonpanel参数的设置才显示。
初始：$('.selector').datepicker({ closetext: 'x' });
获取：var closetext = $('.selector').datepicker('option', 'closetext');
设置：$('.selector').datepicker('option', 'closetext', 'x');
constraininput : boolean : true
如果设置为true，则约束当前输入的日期格式。
初始：$('.selector').datepicker({ constraininput: false });
获取：var constraininput = $('.selector').datepicker('option', 'constraininput');
设置：$('.selector').datepicker('option', 'constraininput', false);
currenttext : string : 'today'
设置当天按钮的文本内容，此按钮需要通过showbuttonpanel参数的设置才显示。
初始：$('.selector').datepicker({ currenttext: 'now' });
获取：var currenttext = $('.selector').datepicker('option', 'currenttext');
设置：$('.selector').datepicker('option', 'currenttext', 'now');
dateformat : string : 'mm/dd/yy'
设置日期字符串的显示格式。
初始：$('.selector').datepicker({ dateformat: 'yy-mm-dd' });
获取：var dateformat = $('.selector').datepicker('option', 'dateformat');
设置：$('.selector').datepicker('option', 'dateformat', 'yy-mm-dd');
daynames : array : ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
设置一星期中每天的名称，从星期天开始。此内容用于dateformat时显示，以及日历中当鼠标移至行头时显示。
初始：$('.selector').datepicker({ daynames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'] });
获取：var daynames = $('.selector').datepicker('option', 'daynames');
设置：$('.selector').datepicker('option', 'daynames', ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi']);
daynamesmin : array : ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']
设置一星期中每天的缩语，从星期天开始，此内容用于dateformat时显示，以前日历中的行头显示。
初始：$('.selector').datepicker({ daynamesmin: ['di', 'lu', 'ma', 'me', 'je', 've', 'sa'] });
获取：var daynamesmin = $('.selector').datepicker('option', 'daynamesmin');
设置：$('.selector').datepicker('option', 'daynamesmin', ['di', 'lu', 'ma', 'me', 'je', 've', 'sa']);
daynamesshort : array : ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
设置一星期中每天的缩语，从星期天开始，此内容用于dateformat时显示，以前日历中的行头显示。
初始：$('.selector').datepicker({ daynamesshort: ['dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam'] });
获取：var daynamesshort = $('.selector').datepicker('option', 'daynamesshort');
设置：$('.selector').datepicker('option', 'daynamesshort', ['dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam']);
defaultdate : date, number, string : null
设置默认加载完后第一次显示时选中的日期。可以是date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
初始：$('.selector').datepicker({ defaultdate: +7 });
获取：var defaultdate = $('.selector').datepicker('option', 'defaultdate');
设置：$('.selector').datepicker('option', 'defaultdate', +7);
duration : string, number : 'normal'
设置日期控件展开动画的显示时间，可选是slow, normal, fast，''代表立刻，数字代表毫秒数。
初始：$('.selector').datepicker({ duration: 'slow' });
获取：var duration = $('.selector').datepicker('option', 'duration');
设置：$('.selector').datepicker('option', 'duration', 'slow');
firstday : number : 0
设置一周中的第一天。星期天为0，星期一为1，以此类推。
初始：$('.selector').datepicker({ firstday: 1 });
获取：var firstday = $('.selector').datepicker('option', 'firstday');
设置：$('.selector').datepicker('option', 'firstday', 1);
gotocurrent : boolean : false
如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。
初始：$('.selector').datepicker({ gotocurrent: true });
获取：var gotocurrent = $('.selector').datepicker('option', 'gotocurrent');
设置：$('.selector').datepicker('option', 'gotocurrent', true);
hideifnoprevnext : boolean : false
设置当没有上一个/下一个可选择的情况下，隐藏掉相应的按钮。（默认为不可用）
初始：$('.selector').datepicker({ hideifnoprevnext: true });
获取：var hideifnoprevnext = $('.selector').datepicker('option', 'hideifnoprevnext');
设置：$('.selector').datepicker('option', 'hideifnoprevnext', true);
isrtl : boolean : false
如果设置为true，则所有文字是从右自左。
初始：$('.selector').datepicker({ isrtl: true });
获取：var isrtl = $('.selector').datepicker('option', 'isrtl');
设置：$('.selector').datepicker('option', 'isrtl', true);
maxdate : date, number, string : null
设置一个最大的可选日期。可以是date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
初始：$('.selector').datepicker({ maxdate: '+1m +1w' });
获取：var maxdate = $('.selector').datepicker('option', 'maxdate');
设置：$('.selector').datepicker('option', 'maxdate', '+1m +1w');
$('.selector').datepicker('option', 'maxdate', '12/25/2012');
mindate : date, number, string : null
设置一个最小的可选日期。可以是date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
初始：$('.selector').datepicker({ mindate: new date(2007, 1 - 1, 1) });
获取：var mindate = $('.selector').datepicker('option', 'mindate');
设置：$('.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', 'november', 'december']
设置所有月份的名称。
初始：$('.selector').datepicker(｛monthnames:['januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december']});
获取：var monthnames = $('.selector').datepicker('option', 'monthnames');
设置：$('.selector').datepicker('option', 'monthnames', ['januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december']);
monthnamesshort : array : ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']
设置所有月份的缩写。
初始：$('.selector').datepicker(｛monthnamesshort:['jan','feb','mar','apr','maj','jun','jul','aug','sep','okt','nov','dec']});
获取：var monthnamesshort = $('.selector').datepicker('option', 'monthnamesshort');
设置：$('.selector').datepicker('option', 'monthnamesshort', ['jan','feb','mar','apr','maj','jun','jul','aug','sep','okt','nov','dec']);
navigationasdateformat : boolean : false
如果设置为true，则formatdate函数将应用到 prevtext,nexttext和currenttext的值中显示，例如显示为月份名称。
初始：$('.selector').datepicker({ navigationasdateformat: true });
获取：var navigationasdateformat = $('.selector').datepicker('option', 'navigationasdateformat');
设置：$('.selector').datepicker('option', 'navigationasdateformat', true);
nexttext : string : 'next'
设置“下个月”链接的显示文字。
初始：$('.selector').datepicker({ nexttext: 'later' });
获取：var nexttext = $('.selector').datepicker('option', 'nexttext');
设置：$('.selector').datepicker('option', 'nexttext', 'later');
numberofmonths : number, array : 1
设置一次要显示多少个月份。如果为整数则是显示月份的数量，如果是数组，则是显示的行与列的数量。
初始：$('.selector').datepicker({ numberofmonths: [2, 3] });
获取：var numberofmonths = $('.selector').datepicker('option', 'numberofmonths');
设置：$('.selector').datepicker('option', 'numberofmonths', [2, 3]);
prevtext : string : 'prev'
设置“上个月”链接的显示文字。
初始：$('.selector').datepicker({ prevtext: 'earlier' });
获取：var prevtext = $('.selector').datepicker('option', 'prevtext');
设置：$('.selector').datepicker('option', 'prevtext', 'earlier');
shortyearcutoff : string, number : '+10'
设置截止年份的值。如果是（0-99）的数字则以当前年份开始算起，如果为字符串，则相应的转为数字后再与当前年份相加。当超过截止年份时，则被认为是上个世纪。
初始：$('.selector').datepicker({ shortyearcutoff: 50 });
获取：var shortyearcutoff = $('.selector').datepicker('option', 'shortyearcutoff');
设置：$('.selector').datepicker('option', 'shortyearcutoff', 50);
showanim : string : 'show'
设置显示、隐藏日期插件的动画的名称。
初始：$('.selector').datepicker({ showanim: 'fold' });
获取：var showanim = $('.selector').datepicker('option', 'showanim');
设置：$('.selector').datepicker('option', 'showanim', 'fold');
showbuttonpanel : boolean : false
设置是否在面板上显示相关的按钮。
初始：$('.selector').datepicker({ showbuttonpanel: true });
获取：var showbuttonpanel = $('.selector').datepicker('option', 'showbuttonpanel');
设置：$('.selector').datepicker('option', 'showbuttonpanel', true);
showcurrentatpos : number : 0
设置当多月份显示的情况下，当前月份显示的位置。自顶部/左边开始第x位。
初始：$('.selector').datepicker({ showcurrentatpos: 3 });
获取：var showcurrentatpos = $('.selector').datepicker('option', 'showcurrentatpos');
设置：$('.selector').datepicker('option', 'showcurrentatpos', 3);
showmonthafteryear : boolean : false
是否在面板的头部年份后面显示月份。
初始：$('.selector').datepicker({ showmonthafteryear: true });
获取：var showmonthafteryear = $('.selector').datepicker('option', 'showmonthafteryear');
设置：$('.selector').datepicker('option', 'showmonthafteryear', true);
showon : string : 'focus'
设置什么事件触发显示日期插件的面板，可选值：focus, button, both
初始：$('.selector').datepicker({ showon: 'both' });
获取：var showon = $('.selector').datepicker('option', 'showon');
设置：$('.selector').datepicker('option', 'showon', 'both');
showoptions : options : {}
如果使用showanim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。
初始：$('.selector').datepicker({ showoptions: {direction: 'up' });
获取：var showoptions = $('.selector').datepicker('option', 'showoptions');
设置：$('.selector').datepicker('option', 'showoptions', {direction: 'up');
showothermonths : boolean : false
是否在当前面板显示上、下两个月的一些日期数（不可选）。
初始：$('.selector').datepicker({ showothermonths: true });
获取：var showothermonths = $('.selector').datepicker('option', 'showothermonths');
设置：$('.selector').datepicker('option', 'showothermonths', true);
stepmonths : number : 1
当点击上/下一月时，一次翻几个月。
初始：$('.selector').datepicker({ stepmonths: 3 });
获取：var stepmonths = $('.selector').datepicker('option', 'stepmonths');
设置：$('.selector').datepicker('option', 'stepmonths', 3);
yearrange : string : '-10:+10'
控制年份的下拉列表中显示的年份数量，可以是相对当前年(-nn:+nn)，也可以是绝对值 (-nnnn:+nnnn)
初始：$('.selector').datepicker({ yearrange: '2000:2010' });
获取：var yearrange = $('.selector').datepicker('option', 'yearrange');
设置：$('.selector').datepicker('option', 'yearrange', '2000:2010');
事件
复制代码 代码如下:
beforeshow : function(input)
在日期控件显示面板之前，触发此事件，并返回当前触发事件的控件的实例对象。
初始：$('.selector').datepicker({ beforeshow: function(input) { ... } });
beforeshowday : function(date)
在日期控件显示面板之前，每个面板上的日期绑定时都触发此事件，参数为触发事件的日期。调用函数后，必须返回一个数组：[0]此日期是否可选(true/false)，[1]此日期的css样式名称(表示默认)，[2]当鼠标移至上面出现一段提示的内容。
初始：$('.selector').datepicker({ beforeshowday: function(date) { ... } });
onchangemonthyear : function(year, month, inst)
当年份或月份改变时触发此事件，参数为改变后的年份月份和当前日期插件的实例。
初始：$('.selector').datepicker({ onchangemonthyear: function(year, month, inst) { ... } });
onclose : function(datetext, inst)
当日期面板关闭后触发此事件（无论是否有选择日期），参数为选择的日期和当前日期插件的实例。
初始：$('.selector').datepicker({ onclose: function(datetext, inst) { ... } });
onselect : function(datetext, inst)
当在日期面板选中一个日期后触发此事件，参数为选择的日期和当前日期插件的实例。
$('.selector').datepicker({ onselect: function(datetext, inst) { ... } });
方法：
复制代码 代码如下:
destory
从元素中移除拖拽功能。
用法：.datepicker( 'destroy' )
disable
禁用元素的拖拽功能。
用法：.datepicker( 'disable' )
enable
启用元素的拖拽功能。
用法：.datepicker( 'enable' )
option
获取或设置元素的参数。
用法：.datepicker( 'option' , optionname , [value] )
dialog
在dialog插件中打开一个日期插件。
用法：.datepicker( 'dialog' , datetext , [onselect] , [settings] , [pos] )
isdisabled
确实日期插件是否已被禁用。
用法：.datepicker( 'isdisabled' )
hide
隐藏（关闭）之前已经打开的日期面板。
用法：.datepicker( 'hide' , [speed] )
show
.datepicker( 'show' )
显示日期插件。
用法：.datepicker( 'show' )
getdate
返回当前日期插件选择的日期。
用法：.datepicker( 'getdate' )
setdate
设置日期插件当前的日期。date参数可以是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')，null表示当天。
用法：.datepicker( 'setdate' , date )
jquery-ui-datepicker的用法讲解
1:先在页面引入相关的js,注意引入顺序不能错
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
....等等语言包(用到哪些加入哪些)
注意:在语言包的最后一句话设置了该datepicker的缺省localization
类似这句：setdefaults(....regional[...])
所以页面的datepicker如果不再自己设置的话，缺省会以最后一个引入的语言包的localization为准.
2:页面示例
其中的注释已经很清楚了,datepicker的官方文档对于option的设置是先init datepicker,再setter or getter
复制代码 代码如下: