关闭

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

945人阅读 评论(0) 收藏 举报
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>

效果为:
 



 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:282235次
    • 积分:5127
    • 等级:
    • 排名:第5414名
    • 原创:221篇
    • 转载:18篇
    • 译文:0篇
    • 评论:148条
    文章分类