JSCal2-The new coolest JavaScript calendar 简单应用
2010-11-23 00:12
357 查看
本文转自:http://willpress.com/solagirl/archives/126
JSCal2是一款简单实用而且非常酷的日历控件,功能丰富界面华丽,在官网http://www.dynarch.com/projects/calendar/有非常详细的介绍。这里是一个简单的应用实例。
下面是实例源代码。
这个例子使用了popup模式,与官方给出的例子稍有区别,官方的例子通常都在input旁边有一个按钮,也就是trigger,点这个按钮就能弹出一个日历,但经过试验这种方式在表单中并不好使,如果将带着额外trigger的input放到<form></form>中,日历就会失效。因此将input field和trigger合二为一,实际效果是点击input输入框就会弹出日历,这样就不用担心用户手动向input中输入非法数据的问题了。
为了更好的使用该日历,下面附上日历的属性列表。
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 — 获取某一个日期的额外信息的回调函数,比如给日期添加一个
4000
CSS 类名,或者当鼠标滑过日期时显示一段提示。
onFocus — 日历获得焦点后的回调函数。
onBlur — 日历失去焦点后的回调函数。
根据这些属性定制化适合自己的日历吧!
JSCal2是一款简单实用而且非常酷的日历控件,功能丰富界面华丽,在官网http://www.dynarch.com/projects/calendar/有非常详细的介绍。这里是一个简单的应用实例。
下面是实例源代码。
<link rel="stylesheet" href="calendar/css/jscal2.css" mce_href="calendar/css/jscal2.css" /> <link rel="stylesheet" href="calendar/css/border-radius.css" mce_href="calendar/css/border-radius.css" /> <!--上面两个css文件是必须引入的--> <link rel="stylesheet" href="calendar/css/reduce-spacing.css" mce_href="calendar/css/reduce-spacing.css" /> <!--reduce-spacing.css不是必须的,引入该文件能使日历以一种紧凑的方式显示,实际效果就是日历变小了。--> <link title="Gold" type="text/css" rel="stylesheet" href="calendar/css/gold/gold.css" mce_href="calendar/css/gold/gold.css" /> <!--这个是日历的皮肤文件,这一款本人觉得比较cool,下载下来默认还有其他几款皮肤,可以在calendar/css文件夹下找到,引入相应css后就能应用。--> <mce:script src="calendar/js/jscal2.js" mce_src="calendar/js/jscal2.js"></mce:script> <mce:script src="calendar/js/lang/en.js" mce_src="calendar/js/lang/en.js"></mce:script> <!--en.js是语言文件,该日历支持语言繁多,当然是支持中文的。如果引入全部语言文件,日历还能根据操作系统的语言自动选择语言文件,蛮智能的。--> <form method="post" action=""> <input type="text" name="date" id="date" /> <!--下面这段脚本初始化一个日历对象,没有这段脚本日历将无法运行。--> <mce:script type="text/javascript"><!-- new Calendar({ inputField: "date", //date对应输入日期的地方,这里只id为date的input输入框 trigger: "date",//trigger指点击后弹出日历的对象,这里定位id是date的input框 dateFormat: "%d-%m-%Y",//定义日期显示格式,如果想让显示的日期带具体时间的话,可以在这里加上小时分钟的格式。 weekNumbers: true,//设为true则在日历左侧显示星期数 reverseWheel:true, onSelect: function() { this.hide() }//这段代码是为了让用户在日历上选择日期后日历能自动隐藏 }); // --></mce:script> </form>
这个例子使用了popup模式,与官方给出的例子稍有区别,官方的例子通常都在input旁边有一个按钮,也就是trigger,点这个按钮就能弹出一个日历,但经过试验这种方式在表单中并不好使,如果将带着额外trigger的input放到<form></form>中,日历就会失效。因此将input field和trigger合二为一,实际效果是点击input输入框就会弹出日历,这样就不用担心用户手动向input中输入非法数据的问题了。
为了更好的使用该日历,下面附上日历的属性列表。
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 — 获取某一个日期的额外信息的回调函数,比如给日期添加一个
4000
CSS 类名,或者当鼠标滑过日期时显示一段提示。
onFocus — 日历获得焦点后的回调函数。
onBlur — 日历失去焦点后的回调函数。
根据这些属性定制化适合自己的日历吧!
相关文章推荐
- JavaScript脚本语言在网页中的简单应用
- 在html页面用ajax的简单应用通过javascript得到数据库中的图片路径并在表格中显示出来
- V8 JavaScript Engine 入门指南 3 -- 一个简单的V8应用
- JavaScript实际应用:简单二级联动菜单实现
- JavaScript简单语法和应用
- JavaScript脚本语言在网页中的简单应用
- 微软的dotnet-new工具可以使创建JavaScript Web 程序变得更简单
- javascript简单应用
- Java Calendar类简单应用:实现可视化日历
- JavaScript的反射机制介绍及简单应用
- Javascript 最简单检测网速的方法和应用
- JavaScript调试工具以及简单应用
- Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
- Javascript 拖拽的一些简单的应用——逐行分析代码,让你轻松了解拖拽的原理
- JavaScript中简单应用正则表达式的小实例_文本替换_replace
- WebViewJavascriptBridge的简单应用
- POJ 1611 The Suspects [简单并查集应用]
- JavaScript学习记录总结(七)——dom对象应用之用户简单管理
- JavaScript 时间间隔和暂停及scrollleft的简单应用
- javascript dom代码应用 简单的相册[firefox only]