jQuery插件的应用之 --- 日历

原创 2012年03月27日 22:37:38
jQuery插件的应用之 --- 日历
一   介绍
(1)优点:在页面开发中,经常会遇到需要用户输入日期的操作,通常的做法是提供一个文本框,让用户输入,然后,再编写代码验证输入的数据,检测其是否是日期类型,这样比较麻烦,同时,用户输入日期的操作也不是很方便,影响用户体验。如果使用jQueryUI中的datepicker插件,这些问题就可以迎刃而解
(2)导入的js和css文件
	jquery-1.7.1.min.js"
	jquery-ui-1.8.18.custom.min.js"
jquery.ui.core.js"
jquery.ui.datepicker.js"
	jquery.ui.widget.js"
	jquery.ui.datepicker-zh-CN.js"   把界面的改为中文的所需要导入的包
jquery-ui-1.8.18.custom.css"
(3)功能实现
在页面中,当单机文本框时,通过datepicker插件弹出一个日期选择窗口,该窗口可以使用下拉列表框的方式选择年份与月份,并显示与日期相对应的星期。
二   代码详解
1.首先来创建一个jsp页面
	<body>
		<div>
			<form action="">
				<input type="text"  id="datepicker"/>
			</form>
		</div>
	</body>
2. 然后用js代码来注册当点击id="datepicker"时触发的事件
<script type="text/javascript">
		$(document).ready(function(){
			$("#datepicker").datepicker();
		});
	</script>
我们得到的效果为:
 


然后我们就可以向datepicker()中加入参数来修饰日期
(1)在日期的标题栏中显示下拉列表框
//在日期的标题栏中是否出现下拉选择框,选择日期中的月份,true代码有选择框
 changeMonth : true,
changeYear : true//在日期的标题栏中出现下拉列表框显示年
(2)关闭弹出的日期框
//在日期面板的下方出现2个按钮,一个是tody,一个是关闭,默认值是不显示的
showButtonPanel : true,
//关闭的效果文字必须结合showButtonPanel:true来使用
closeText : "关闭"

(3)设定在文本框中的格式
dateFormat : "yy-mm-dd"
(4)设置日期的缺省值,在当前日期中 加或减一天
defaultDate : "-3"
(5)设置日期出现和消失的动画效果,比如有slide,toggle
showAnim : "slide"
(6)现在当年中的第一周,在左边显示
showWeek : true
(7)默认fisrtDay是当年的第一天
firstDay : 1
(8)表示下拉框中的年份的范围
yearRange : "2011:2012"
(9)如果是两个选框,填写的是从哪一天到哪一天的话,要获取点击的值并判断值
onSelect : function(selectedDate) {
			//获取当前 对象this.id=dp minDate  //开始日期的最小值 
			//获取 option的值是minDat或者是maxDate  根据dom对象的id
			var option = this.id == "dep" ? "minDate" : "maxDate",
				//获取当前日期的实例对象 ,每遍历一次就 获取一次
				instance = $( this ).data( "datepicker" ),
				//获取日期   instance.settings 获取日期的值 
				date = $.datepicker.parseDate(
				instance.settings.dateFormat ||
				$.datepicker._defaults.dateFormat,
				selectedDate, instance.settings );
				alert(instance.settings);
				//设置日期
				dates.not( this ).datepicker( "option", option, date );
			},
(10)在应用中还可能会用到点击图片或按钮弹出选择日期的对话框,会用到几下几个属性
//点击按钮时出发的事件 
		showOn:"button",
		//向按钮上添加文本 
		buttonText:"选择日期",
		//向按钮上添加图片 
		buttonImage:" images/calendar.gif",
		//设置只显示图片  ,没有按钮 
		buttonImageOnly:true,
(11)还有就是补全所有的日期,但是是不可选的 
//补全所有的 
	showOtherMonths:true,
	//在当前月中,其他月的日期不可以选择  ,,默认为false 
	selectOtherMonths:false
(12)把显示的日期换成中文的格式,要导入包jquery.ui.datepicker-zh-CN.js,也可以加入$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);来声明

整体的代码为:
<script type="text/javascript">
//当页面 加载完毕的时候触发的匿名函数
$(document).ready(function() {	
	  $.datepicker.setDefaults($.datepicker.regional["zh-CN"]);
	//当点击的时候触发事件,点击的时候直接显示 
		//判断开始日期的最大值等于结束日期的最小指 
		var dates = $("#dep,#end").datepicker(
				{
					changeMonth : true,//在日期的标题栏中是否出现下拉选择框,选择日期中的月份,true代码有选择框,fals代码没有选择框
					changeYear : false,//在日期的标题栏中出现下拉列表框显示年 
					showButtonPanel : true, //在日期面板的下方出现2个按钮,一个是tody,一个是关闭,默认值是不显示的
					closeText : "关闭", //关闭的效果文字必须结合showButtonPanel:true来使用
					dateFormat : "yy-mm-dd", //设定在文本框中的格式 
					defaultDate : "-3", //缺省值,在当前日期中 加或减一天 
					showAnim : "slide", //设置动画效果    slide  toggle
					showWeek : true, //显示当年中的第几 周,在最左边 
					firstDay : 1, //默认fisrtDay是当年的第一天
					yearRange : "2011:2012", //表示下拉框中的年份的范围 	

					onSelect : function(selectedDate) {
					//获取当前 对象this.id=dp minDate  //开始日期的最小值 
					//alert(this);
						//获取 option的值是minDat或者是maxDate  根据dom对象的id
						var option = this.id == "dep" ? "minDate" : "maxDate",
						//获取当前日期的实例对象 ,每遍历一次就 获取一次
						instance = $( this ).data( "datepicker" ),
						//获取日期   instance.settings 获取日期的值 
						date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings );
						
						alert(instance.settings);
						//设置日期
						dates.not( this ).datepicker( "option", option, date );
					},
					//提示信息
					prevText:"上一月",
					nextText:"下一月",
					//显示几个选择的日期
					numberOfMonths:1,
					//点击按钮时出发的事件 
					showOn:"button",
					//向按钮上添加文本 
					buttonText:"选择日期",
					//向按钮上添加图片 
					buttonImage:" images/calendar.gif",
					//设置只显示图片  ,没有按钮 
					buttonImageOnly:true,
					//补全所有的 
					showOtherMonths:true,
					//在当前月中,其他月的日期不可以选择  ,,默认为false 
					selectOtherMonths:false
				});
	});
</script>

效果为:
 



 

相关文章推荐

jquery插件 日历的应用详解

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

原创日历Jquery插件

  • 2013年03月19日 13:27
  • 65KB
  • 下载

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

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

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

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

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

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

jQuery插件之日历插件

在页面开发中,经常遇到需要用户输入日期的操作。通常的做法是,提供一个文本框(text),让用户输入,然后,编写代码验证输入的数据,检测其是否是日期类型。这样比较麻烦,同时,用户输入日期的操作也不是很方...
  • w_l_j
  • w_l_j
  • 2012年03月27日 20:08
  • 2415

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

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

jQuery插件应用

软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践。 根据《jQuery高级编程》的描述,jQuery插件开发...
  • oVoo_8
  • oVoo_8
  • 2015年04月25日 17:39
  • 332
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件的应用之 --- 日历
举报原因:
原因补充:

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