日期选择器：jquery datepicker的使用

jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
官方地址：http://docs.jquery.com/UI/Datepicker，官方示例： http://jqueryui.com/demos/datepicker/。

一个不错的地址，用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/

准备工作

首先请到jqueryui.com官网下载datepicker插件代码，注意官网提供了整个jquery ui的所有插件下载，但是您可以选择其中几个用到的插件下载，本文中只用到datepicker，所以只选择下载jquery ui核心代码和datepicker代码。你可以直接点击本文上面的Download下载按钮下载demo源码包，其中就包括了datepicker插件源码。

HTML

首先在head之间引入jquery库文件和datepicker插件以及相关css。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui-datepicker.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 

然后在body间加入一个输入框。

<input type="text" id="date_1" /> 

Javscript

调用datepicker非常简单，直接使用以下代码就可以实现：

    $(function(){ 
    $("#date_1").datepicker({
      showButtonPanel: true,
      changeMonth: true,
      changeYear: true,
      dateFormat:"yy-mm-dd",
      minDate: -20, maxDate: "+1M +10D",
      appendText: "(日期)",
      autoSize: true
    }); 
}); 

这样，单击输入框的时候会自动弹出一个日期选择器，选中日期后，自动关闭选择器，并在输入框中显示选中的日期。