关闭

jQuery插件之日历插件

标签: jquery插件正则表达式日历datefunctionstylesheet
2325人阅读 评论(0) 收藏 举报
在页面开发中,经常遇到需要用户输入日期的操作。通常的做法是,提供一个文本框(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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:396745次
    • 积分:5882
    • 等级:
    • 排名:第4312名
    • 原创:210篇
    • 转载:15篇
    • 译文:0篇
    • 评论:38条
    文章分类
    最新评论