日期选择器：jquery datepicker的使用

在jquery ui中，提供了一个非常实用的日期选择器：datepicker，使用它能非常方便的展现日历中的日期，灵活配置相关选项，包括日期格式、范围等。我们经常在WEB应用中用到datepicker，比如要求用户输入日期进行相关查询的。我们很早之前就应用datepicker到很多项目中，今天整理成文与大家分享。

demo http://www.helloweba.com/demo/datepicker/

download http://www.helloweba.com/demo/downzip/datepicker.rar

查看演示DEMO下载源码

查看演示DEMO下载源码

准备工作

首先请到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(); 
}); 

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

选项及事件使用说明

datepicker提供了丰富的选项设置事件方法调用，笔者先将经常用到的相关属性和方法整理成表格，方便查询和使用。

选项	描述	默认值
altField	将选择的日期同步到另一个域中，配合altFormat可以显示不同格式的日期字符串。demo	''
altFormat	当设置了altField的情况下，显示在另一个域中的日期格式。	''
appendText	在日期插件的所属域后面添加指定的字符串。	''
buttonImage	设置可以用来点击弹出日历的按钮图片，如果非空，则