jquery日历控件

最新推荐文章于 2024-06-22 09:50:36 发布

gsmiao

最新推荐文章于 2024-06-22 09:50:36 发布

阅读量3.9k

点赞数

分类专栏： js 文章标签： javascript jquery 控件 js

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JSCal2是一款简单实用而且非常酷的日历控件，功能丰富界面华丽，在官网http://www.dynarch.com/projects/calendar/有非常详细的介绍。这里是一个简单的应用实例。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery日历控件</title>
<link rel="stylesheet" href="calendar/css/jscal2.css" />  
<link rel="stylesheet" href="calendar/css/border-radius.css" />  
<!--上面两个css文件是必须引入的-->  
<link rel="stylesheet" href="calendar/css/reduce-spacing.css" />  
<!--reduce-spacing.css不是必须的，引入该文件能使日历以一种紧凑的方式显示，实际效果就是日历变小了。-->  
<link title="Gold" type="text/css" rel="stylesheet" href="calendar/css/gold/gold.css" />  
<!--这个是日历的皮肤文件，这一款本人觉得比较cool，下载下来默认还有其他几款皮肤，可以在calendar/css文件夹下找到，引入相应css后就能应用。-->  
<script src="calendar/js/jscal2.js" ></script>  
<script src="calendar/js/lang/cn.js" ></script>  
<!--en.js是语言文件，该日历支持语言繁多，当然是支持中文的。如果引入全部语言文件，日历还能根据操作系统的语言自动选择语言文件，蛮智能的。--> 
<!--下面这段脚本初始化一个日历对象，没有这段脚本日历将无法运行。-->  
</head>
<body>
	<form method="post" action="success.jsp">  
		<input type="text" name="startdate" id="startdate" /> 至
		<input type="text" name="enddate" id="enddate" /> <br>  
		<script type="text/javascript"> 
			new Calendar({  
				inputField: "startdate", //date对应输入日期的地方，这里只id为date的input输入框  
				trigger: "startdate",//trigger指点击后弹出日历的对象，这里定位id是date的input框  
				dateFormat: "%Y-%m-%d",//定义日期显示格式，如果想让显示的日期带具体时间的话，可以在这里加上小时分钟的格式。  
				weekNumbers: true,//设为true则在日历左侧显示星期数  
				reverseWheel:true,  
				onSelect: function() { this.hide(); }//这段代码是为了让用户在日历上选择日期后日历能自动隐藏  
			}); 
			
			new Calendar({
				inputField: "enddate", //date对应输入日期的地方，这里只id为date的input输入框  
				trigger: "enddate",//trigger指点击后弹出日历的对象，这里定位id是date的input框  
				dateFormat: "%Y-%m-%d",//定义日期显示格式，如果想让显示的日期带具体时间的话，可以在这里加上小时分钟的格式。  
				weekNumbers: true,//设为true则在日历左侧显示星期数  
				reverseWheel:true,  
				onSelect: function() { this.hide(); }//这段代码是为了让用户在日历上选择日期后日历能自动隐藏
			});
		</script>   
		<input type="submit" value="提交"/>
		<input type="reset" value="重置"/> 
	</form>  
</body>
</html>

为了更好的使用该日历，下面附上日历的属性列表。

animation — 默认为true(IE6除外)，如果传递true给该属性，就会强制所有浏览器（包括IE6）应用动画，传递false则所有浏览器都禁用动画。
cont —内联显示的日历的容器（对popup类型无效），将要显示日历的容器（如div等）的ID传递给此属性，则日历将在相应容器中以内敛方式显示（即日历在刷新页面后直接显示，popup类型则必须点击trigger后才显示日历）。
bottomBar — 布尔类型，默认值true。在底部显示一个带有“Today”按钮的工具条。
date — 日历默认显示的日期。
fdow — 一周的第一天，默认日期定义在各个语言文件中。例如传递0给属性指一周的从周日开始，传递1则是从周一开始，以此类推。
min — 日历可以选择的最早的日期.
max — 与min配合使用，表示日历可以选择的最大日期。
reverseWheel — 默认为false。如果想反转鼠标滚轮滚动时日历的变化方向，设置此项为true。（JsCAL可以滚动滚轮控制日历翻页。）
selectionType – 默认SEL_SINGLE，只能选择一个日期。设为SEL_MULTIPLE的话就能选择多个日期。
selection —设置日历初始化时默认选中的日期。在SEL_SINGLE模式下可以设置默认选中当前日期，在SEL_MULTIPLE 模式下可以设置默认选中一个时间段。
weekNumbers —默认false。设置为true就会在左侧多出一栏显示周数。
checkRange — 默认为false。当你开启了范围选择，但又不希望用户可以选择已被禁止的日期，那么开启此选项。
align — 默认的位置选项，仅针对popup类型。
inputField — 这是一个与input关联的ID，仅针对popup类型，日期将会显示在与这个ID关联的input输入框中。
trigger — 按钮元素（或其他任何元素）的ID，点击这个元素可以显示日历，仅针对popup类型这是onclick时间的钩子函数。
dateFormat — 日期格式化，以字符串形式格式化日期和时间的显示形式。
opacity — 透明度设置。0为不透明，1、2、3则会增加透明度。IE浏览器默认是1，其他浏览器默认是3。透明度过高会显著降低程序再IE浏览器中的执行速度。
titleFormat — 定义日历中日期的显示形式。默认是“b% %Y”，显示形式如“April 2010”。
showTime — 默认为false。显示时间选择器，设置为true会显示24小时的时间选择器，设置为12则显示带有am/pm的12小时时间选择器。
timePos — 时间选择器在底部栏目中的位置，默认是“right”，即在“Today” 按钮的右侧，设置为“left”就会出现在“Today”的左侧。
time — 日历时间选择器中显示的默认时间。默认显示当前时间，如果要改变默认时间，可以传递一个格式为“HHMM”d的整数，比如要显示9:45 pm,则传递2145in。
minuteStep — 分钟增长和减少的步长。
onSelect — 选择日期后要调用的函数。
onChange —日期时间发生变化后的回调函数。
onTimeChange — 当时间选择器的时间发生变化后的回调函数，它将获得两个参数：日历的实例引用和时间选择器中的时间。
disabled —处理被禁用的日期的回调函数。
dateInfo — 获取某一个日期的额外信息的回调函数，比如给日期添加一个CSS 类名，或者当鼠标滑过日期时显示一段提示。
onFocus — 日历获得焦点后的回调函数。
onBlur — 日历失去焦点后的回调函数。