网站地图    收藏   

子栏目

主页 > 前端 > javascript >

JavaScript日历控件插件使用详解(支持中文英文繁体

来源：自学PHP网    时间：2014-09-19 14:47 作者： 阅读:次

[导读] 今天我们要讲述的是kimsoft-jscalendar日历控件了，这款日历控件单文件；支持多语言；兼容ie6.0+, firefox1.0+, Opera9哦，下面我来给大家介绍介绍。...

kimsoft-jscalendar一款优秀的#JavaScript#日历控件，kimsoft-jscalendar。它小巧，单文件；支持多语言；兼容ie6.0+, firefox1.0+, Opera9，其它浏览器未测试；回显选定的时间；Apache license 2.0，商业友好。用 iframe 解决 IE 中层在 select 控件上显示的问题


一、什么是 kimsoft-jscalendar

一个简洁的avaScript日历控件，可在Java Web项目，.NET Web 项目中使用


二、kimsoft-jscalendar 有什么特点

    1. 小巧，单文件

    2. 支持多语言，并可自由扩充（目前支持简体中文，繁体中文，英语美国和英语英国）

    3. 兼容ie6.0+, firefox1.0+, Opera9，其它浏览器未测试

    4. 回显选定的时间，这是很多其它日历控件没有的

    5. Apache license 2.0，商业友好。可免费使用，自由修改传播，但请保留版权信息

    6. 用 iframe 解决 IE 中层在 select 控件上显示的问题

    7. 其它特点有特发现...

 

三、使用说明
 

3.1、将 js 文件导入到页面中（可以是 html, jsp, asp, aspx, php）等。

 
<script type="text/javascript" src="/calendar.js"></script> 

注意以下点：

    1. calendar.js 文件内容编写是UTF-8，请一定要将此文件的编码设置为UTF-8

    2. 上面的代码内容一定要放在HTML的<body></body>之间，特别是在符合XHTML规范的文档中

    3. 包含此文件后，此页面已经自动实例化了一个日历对象 calendar，现在就可以使用了
 

 3.2、一个最简单的例子
 

用预定义的 calendar 对象生成日历代码：

 代码如下 复制代码

<input name="date" type="text" id="date" onclick="calendar.show(this);" size="10" maxlength="10" readonly="readonly" /> 

当然也可以这样：

 
new一个新的日历对象并生成日历代码

 代码如下 复制代码
<input name="date" type="text" id="date" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly "/> 

3.3、指定开始年份和结束年份的日历
 

指定开始年份和结束年份的日历代码：

 代码如下 复制代码

<input name="range_date" type="text" id="range_date" onclick="new Calendar(2000, 2008).show(this);" size="10" maxlength="10" readonly="readonly" /> 

只能选择 2000 到 2008年间的日期： 
   

3.4、多语言版本支持（可自由扩充），目前支持的语言：0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)
 

中文日历代码：

 代码如下 复制代码

<input name="cn_date" type="text" id="cn_date" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly" /> 

 

繁体中文日历代码：

 代码如下 复制代码

<input name="tw_date" type="text" id="tw_date" onclick="new Calendar(null, null, 3).show(this);" size="10" maxlength="10" readonly="readonly" /> 

 
英文日历代码：

 代码如下 复制代码

<input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 1).show(this);" size="10" maxlength="10" readonly="readonly" /> 

3.5、在一个控件上点击选择，在另外一个控件上显示日期：

 代码如下 复制代码

 <input name="control_date" type="text" id="control_date" size="10" maxlength="10" readonly="readonly" />
<input type="button" name="button" id="button" value="选择日期" onclick="new Calendar().show(this.form.control_date);" />

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论