JSCal2使用指南1

原文地址: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\demoJSCal2提供的例子。

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

JSCal2-1.8\src\jsJSCal2日历控件使用的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>元素引用JSCal2CSS文件。jscal2.css是核心的CSS,它提供了默认的皮肤。border-radius.css使日历控件能够圆角显示,需要浏览器支持(FirefoxSafariChrome)。还可以指定使用的皮肤(如:gold/gold.css)。

皮肤(默认):

皮肤(Gold):


皮肤(Matrix):


皮肤(Steel):


皮肤(Win2k):




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值