在jquery ui中，提供了一个非常实用的日期选择器：datepicker，使用它能非常方便的展现日历中的日期，灵活配置相关选项，包括日期格式、范围等。我们经常在WEB应用中用到datepicker，比如要求用户输入日期进行相关查询的。我们很早之前就应用datepicker到很多项目中，今天整理成文与大家分享。
查看演示DEMO 下载源码
准备工作
首先请到官网下载datepicker插件代码，注意官网提供了整个jquery ui的所有插件下载，但是您可以选择其中几个用到的插件下载，本文中只用到datepicker，所以只选择下载jquery ui核心代码和datepicker代码。你可以直接点击本文上面的Download下载按钮下载demo源码包，其中就包括了datepicker插件源码。
HTML
首先在head之间引入jquery库文件和datepicker插件以及相关css。
<scripttype="text/javascript"src="js/jquery.js"></script> <scripttype="text/javascript"src="js/jquery-ui-datepicker.js"></script> <linkrel="stylesheet"type="text/css"href="css/jquery-ui.css"/>
然后在body间加入一个输入框。
<inputtype="text"id="date_1"/>
Javscript
调用datepicker非常简单，直接使用以下代码就可以实现：
$(function(){ $("#date_1").datepicker(); });
这样，单击输入框的时候会自动弹出一个日期选择器，选中日期后，自动关闭选择器，并在输入框中显示选中的日期。
时间选择
Datetimepicker依赖于jquery和jquery ui，因此，您首先要获取jquery库和jquery ui以及datetimepicker，点击这里下载最新版的datetimepicker
在html页面中head中加入以下代码：
<linkrel="stylesheet"type="text/css"href="css/jquery-ui.css"/> <scripttype="text/javascript"src="js/jquery.min.js"></script> <scripttype="text/javascript"src="js/jquery-ui.js"></script> <scripttype="text/javascript"src="js/jquery-ui-timepicker-addon.js"></script>
然后在body建加入一行代码：
<inputtype="text"id="example"/>
CSS
注意，除了引入jquery ui的样式外，还需额外加入以下样式，用于控制时间控件的外观。
.ui-timepicker-div.ui-widget-header{margin-bottom:8px;} .ui-timepicker-divdl{text-align:left;} .ui-timepicker-divdldt{height:25px;margin-bottom:-25px;} .ui-timepicker-divdldd{margin:010px10px65px;} .ui-timepicker-divtd{font-size:90%;} .ui-tpicker-grid-label{background:none;border:none;margin:0;padding:0;} .ui_tpicker_hour_label,.ui_tpicker_minute_label,.ui_tpicker_second_label, .ui_tpicker_millisec_label,.ui_tpicker_time_label{padding-left:20px}
jQuery
当输入框获得焦点时，调用datetimepicker。
$('#example_1').datetimepicker();
如果只需要显示时间，则：
$('#example_2').timepicker();
定义时间格式：
$('#example_3').datetimepicker({ showSecond:true, showMillisec:true, timeFormat:'hh:mm:ss:l' });
请点击这里查看更多demo。
选项及事件使用说明
datepicker提供了丰富的选项设置事件方法调用，笔者先将经常用到的相关属性和方法整理成表格，方便查询和使用。
