JSCal2使用指南1

来源：互联网发布：知微科技编辑：程序博客网时间：2024/05/19 10:12

原文地址：JSCal2: JavaScript日历控件(一)

JSCal2是相当不错的JavaScript日历控件。

JSCal2的特性：

（1）可以选择单个日期、多个日期以及日期范围，按CTRL键可以选择多个独立的日期，按SHIFT键可以选择指定范围的日期；

（2）支持两种模式：内联（inline）和弹出（popup）；

（3）可以设置失效日期，通过指定日期的最小值和最大值的方式，或者通过回调方法；

（4）改变年月有动画效果，年月下拉式选择可以帮助你快速地选择年月；

（5）支持时间选择；

（6）可以通过鼠标的滚动来改变日期（年、月、时、分）；

（7）支持国际化，提供了单独的语言JS文件；

（8）可以自定义外观，默认提供5种皮肤；

（9）不依赖任何JS框架，不会产生负面影响；

安装JSCal2

下载地址：http://www.dynarch.com/projects/calendar/download/

下载JSCal2-1.8.zip，解压到本地磁盘。

JSCal2-1.8\demo：JSCal2提供的例子。

JSCal2-1.8\src\css：JSCal2日历控件使用的CSS，默认支持5种皮肤。

JSCal2-1.8\src\js：JSCal2日历控件使用的JavaScript，也提供了国际化支持。

<!DOCTYPEhtmlPUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>JSCal2</title>

<linkrel="stylesheet"type="text/css"href="JSCal2/css/jscal2.css"/>

<linkrel="stylesheet"type="text/css"href="JSCal2/css/border-radius.css"/>

<linkrel="stylesheet"type="text/css"href="JSCal2/css/gold/gold.css"/>

<scripttype="text/javascript"src="JSCal2/js/jscal2.js"></script>

<scripttype="text/javascript"src="JSCal2/js/lang/cn.js"></script>

</head>

<body>

<divid="calendar-container"></div>

<scripttype="text/javascript">

Calendar.setup({

cont: "calendar-container",

weekNumbers: true,

showTime: true

});

</script>

</body>

</html>

对于IE浏览器，需要指定DOCTYPE，否则会有问题，如图所示：

使用<script>元素引用JavaScript文件。需要引用jscal2.js和至少一种语言JS文件（如：lang/cn.js）。

使用<link>元素引用JSCal2的CSS文件。jscal2.css是核心的CSS，它提供了默认的皮肤。border-radius.css使日历控件能够圆角显示，需要浏览器支持（Firefox、Safari、Chrome）。还可以指定使用的皮肤（如：gold/gold.css）。

皮肤（默认）：

皮肤（Gold）：

皮肤（Matrix）：

皮肤（Steel）：

皮肤（Win2k）：