jQuery插件之日历插件

原创 2012年03月27日 20:08:08
在页面开发中,经常遇到需要用户输入日期的操作。通常的做法是,提供一个文本框(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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery插件FullCalendar日程表实现可扩展Google日历功能

jQuery插件FullCalendar日程表实现可扩展Google日历功能 这个介绍 jQuery 日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划...

jquery插件 日历的应用详解

日历 datepicker 在页面开发中,经常遇到需要用户输入日期的操作。通常的操作是提供一个文本框,这样的操作不方便,影响用户的体验,如果使jquery插件中的日历,这些问题就会迎刃而解。 常用...

用jquery插件实现漂亮的日历效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...

原创日历Jquery插件

  • 2013-03-19 13:27
  • 65KB
  • 下载

jQuery插件实战之fullcalendar(日历插件)Demo

jQuery的插件非常多,应用的场景也非常丰富,今天我这里给大家介绍一款非常实用的日历页面开发插件 - fullcalendar,目前最新版本是1.5.1,使用这款插件能够快速帮助你快速编程实现基于w...

jQuery插件实战之fullcalendar(日历插件)Demo

jQuery的插件非常多,应用的场景也非常丰富,今天我这里给大家介绍一款非常实用的日历页面开发插件 - fullcalendar,目前最新版本是1.5.1,使用这款插件能够快速帮助你快速编程实现基于w...

常用的Jquery日历插件

FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日历样...

jQuery插件

  • 2016-07-01 01:43
  • 3.02MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)