jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
一个不错的地址，用来DIY jQuery UI界面效果的站点
DatePicker基本使用方法：
<!DOCTYPE html> <html> <head> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#datepicker").datepicker(); }); </script> </head> <body> <div type="text"></div> </body> </html> 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