JQuery UI中集成了许多常用的效果，今天自学的其中的日历效果，感觉还不错，以后很多时候都可以用的到。在下边代码中还写了时间段的编写，很有用，大家可以试试。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加日历效果</title>
<!--引入jquery类库-->
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />
<script language="javascript" type="text/javascript">
$(function (){
$("#datepicker").datepicker({
dateFormat:'yy-mm-dd', //更改时间显示模式
showAnim:"slide", //显示日历的效果slide、fadeIn、show等
changeMonth:true, //是否显示月份的下拉菜单，默认为false
changeYear:true, //是否显示年份的下拉菜单，默认为false
showWeek:true, //是否显示星期,默认为false
showButtonPanel:true, //是否显示取消按钮，并含有today按钮，默认为false
closeText:'close', //设置关闭按钮的值
yearRange:'2010:2012', //显示可供选择的年份
defaultDate:+7 //表示默认日期是在当前日期加上7天
});
//---------------------利用datepicker创建时间段----------------
$("#dateStart").datepicker({ //绑定开始日期
changeMonth:true, //显示下拉列表月份
changeYear:true, //显示下拉列表年份
showWeek:true, //显示星期
firstDay:"1", //设置开始为1号
onSelect:function(dateText,inst){
//设置结束日期的最小日期
$("dateEnd").datepicker('option','minDate',new Date(dateText.replace('-',',')));
}
});
$("#dateEnd").datepicker({ //设置结束绑定日期
changeMonth:true, //显示下拉列表月份
changeYear:true, //显示下拉列表年份
showWeek:true, //显示星期
firstDay:"1", //设置开始为1号
onSelect:function(dateText,inst){
//设置开始日期的最大日期
$('#dateStart').datepicker('option','maxDate',new Date(dateText.replace('-',',')));
}
});
});
</script>
</head>
<body>
<!--
jQuery UI 使用 前提
第一步：引入别人的类库
js类库
css样式类库文件
第二步：模拟实现
-->
<div>
填入日期：<input type="text" id="datepicker" />
</div>
<div>
填入开始日期：<input type="text" id="dateStart" />
填入结束日期：<input type="text" id="dateEnd" />
</div>
</body>
</html>
效果图：
