Datepicker控件

jQuery UI(http://jqueryui.com/)是在jQuery基础上开发的开源JavaScript网页可视化控件库，其功能主要实现用户的基本界面、交互、动画、特效，以及可以更换主题等可视化控件。

jQuery UI为基本界面控件建立了17种主题的样式，如果开发者需要特定的主题，可以使用ThemeRoller应用程序设置个性化的主题样式。

要使用Datepicker日期选择控件，首先需要在页面<head>标签中引入相关的JavaScript类库，实现代码如下：

<link type="text/css" href="http://www.cnblogs.com/Scripts/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
  <script type="text/javascript" src="http://www.cnblogs.com/Scripts/js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/Scripts/js/jquery-ui-1.7.2.custom.min.js"></script>

对应的文件目录如下：

我们要使用的是Datepicker控件

所以要在<head>标签中定义该JavaScript方法

如下：

<script type="text/javascript">
      $(function() {
          $('#datepicker').datepicker({
              inline: true
          });
      });
   </script>

在需要使用该Datepicker控件的地方添加语句

<div id="datepicker"></div>

即可。

效果如下

如有需要可以在

$('#datepicker').datepicker({
              inline: true
          });

语句块中添加额外的方法

如：

$('#datepicker').datepicker({
              changeMonth:true,changeYear:true　　　　　　
          });

将changeMonth和changeYear设置成true,可以再日期选择控件的工具栏中显示年和月的下拉列表框，便于用户设置不同年，月的日期，

上述代码的运行效果如下：