jQuery插件之日历插件

在页面开发中，经常遇到需要用户输入日期的操作。通常的做法是，提供一个文本框（text）,让用户输入，然后，编写代码验证输入的数据，检测其是否是日期类型。这样比较麻烦，同时，用户输入日期的操作也不是很方便，影响用户体验。如果使用jQuery UI中的datepicker(日历)插件，这些问题都可以迎刃而解。该插件调用的语法格式如下：
$(“.selector”).datepicker(options);
其中”.selector”表示DOM元素，一般指文本框，由于该插件的作用是提供日期选择，因此常与一个文本框绑定，将选择后的日期显示在该文本框中，选择options是一个对象与前面插件中的options一样，通过改变其参数对应的值，从而实现插件功能的变化，在datepicker插件中，选择options常用参数如下
1、changeMonth    设置一个布尔值，如果wietrue，则可以在标题处出现一个下拉选择框，可以选择月份，默认值为false
2、changeYear  设置一个布尔值，如果为true，则可以在标题处出现一个下拉选择框，可以选择年份，默认为false
3、showButtonPanel   设置一个布尔值，如果为true，则在日期的下面显示一个面板，其中有两个按钮；一个为“今天”，另一个按钮为“关闭”，默认值为false，表示不显示
4、closeText   设置关闭按钮上的文字信息，这项设置的前提是，showButtonPanel的值必须为true，否则显示不了效果
5、dateFormat   设置显示在文本框（text）中的日期格式，可设置为{dateFormat,’yy-mm-dd’},表示日期的格式为年-月-日，如2012-10-1
6、defaultDate  设置一个默认日期值，如{defaultDate+7}，表示，弹出日期选择窗口后，默认的日期是在当前日期上加上7天
7、showAnim   设置显示弹出或隐藏日期选择窗口的方式。可以设置的方式有，“show”、“sildeDown”、“fadeln”后者“”，表示没有弹出日期选择窗口的方式
8、showWeek  设置一个布尔值，如果为true，则可以显示每天对应的星期，默认值为false
9、yearRange   设置年份的范围
日历实例代码：
<!-- 引入相应的jQueryUI的类库文件 -->
<script type="text/javascript" src="${ pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">></script>
<link type="text/css" rel="stylesheet" href="${ pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css"/>
<!—使弹出的窗口支持中文，该文件会将插件中的英文部分翻译成中文-
  <script type="text/javascript" src="${ pageContext.request.contextPath}/js/jquery.ui.datepicker-zh-CN.js"></script>
实现代码
<script type="text/javascript">
  //当页面加载完毕时触发该匿名函数
  	$(document).ready(function(){
  	//中文显示
  	$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);
 
	var dates =$("#db,#end").datepicker({
  			changeMonth:true,
  			changeYear:true,//这样就可以改变年月了
  			showButtonPanel:true, //在面板下出现两个按钮，一个是today，另一个是done
  			closeText:"关闭",  //设置面板下方按钮的内容。必须结合showButtonPanel，而且showButtonPanel的值必须为true
 
  			dateFormat:"yy/mm/dd",//设置日期的显示格式
  			defaultDate:-1,//缺省值，既默认值，在当前日期中加或者是减几天
  			showAnim:"show", //日历    出现的动画效果
			showWeek:true,//显示周   当年中的第几周     结合firstDay使用
 			firstDay:1, //默认firstDay是当年的第一天    这里值的改变会影响是第几周
  			yearRange:"1940:2012", //表示下拉列表框中的范围
			//使用插件实现分段日期的选择，结束日期不能选择开始日期之前的
  			onSelect:function(selectedDate){
  			//开始日期的最大值   等于  结束日期的最小值
  			//结束日期的最小值   大于等于   开始日期的最大值
  			//获取option的值是minDate或者maxDate   根据dom对象的id
  				var option=this.id=="db" ? "minDate" : "maxDate";
  				//获取当前日期的实例对象
  				var instance = $( this ).data( "datepicker" );
  				//  开始的日期值   第一个参数是转换格式    第二个参数是转换的日期     第三个参数是对象
				var date = $.datepicker.parseDate(instance.settings.dateFormat ||$.datepicker._defaults.dateFormat,selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
  			},
  			prevText:"上个月", 
  			nextText:"下个月",//上下月按钮的提示
  			showOn:"button",//在文本框后面添加一个按钮
  		//	buttonText:"选择日期"
  			buttonImage:" images/calendar.gif",
			buttonImageOnly:true,  //本身是一个按钮，加上这句话之后就会只显示图片
 
  			showOtherMonths:true,//当前月的日期  也包含其他月份的日期
  			selectOtherMonths:false //不是当前月的日期是否可选  默认值是false不可选
 
  		});
  	});
	使用插件实现分段日期的选择还可以用下面的方法，不过相比较来说比较麻烦
		//设置开始日期
  		$("#db").datepicker({
  			onSelect:function(dateText,inst){
  				//开始日期的最大值等于结束日期的最小值
  				//结束日期的最小值大于等于开始日期的最大值
  				//设置结束日期的最小日期
  				//方法一    使用正则表达式转译为   yyyy,mm,dd       /代表正则表达式开始          \表示后面的字符要原样输出  ，因为-在java中具有特殊含义，所有要转译        最后一个/表示正则表达式的结束
  				//$("#end").datepicker("option","minDate", new Date(dateText.replace(/\-/g,",")));
  				//方法二     不转译也是可以的
  				$("#end").datepicker("option","minDate", new Date(dateText));
  			}
  		});
  		//设置结束日期
  		$("#end").datepicker({
  			onSelect:function(dateText,inst){
				//$("#db").datepicker("option","maxDate", new Date(dateText.replace(/\-/g,",")));
				$("#db").datepicker("option","maxDate", new Date(dateText));
  			}
  		});
Body中的内容：
<h1>日历插件</h1>
   <div id="datepicker"></div>
   <form action="" method="get">
   	开始日期:<input type="text" id="db"/>
   	to 结束日期<input type="text" id="end"/>
   </form>