功能强大使用方便界面美观的js日历

Posted on 2009-12-17 17:16 terryxue 阅读(2616) 评论(4)  编辑  收藏 所属分类: javascript
因项目需要,又找不到合适的日历控件,只好把自己几年前写的日历控件拿出来完善使用了,同时也就更新了这篇老的博客,如果你觉得喜欢的话,拿去用吧,不喜欢的话,还请给点改进的建议。
效果图
1. 日期选择

2.日期时间选择

3.纯时间输入


二、功能介绍
1. 支持所有主流浏览器
2. 只需一条语句就可以将日历绑定到目标元素上
3. 支持自定义日期格式
4. 可以指定回调函数,在日期选择后触发
5. 日历初始时间为input元素的初始值,input内容为空时默认值取当前系统时间,也可以设置默认值为空
6. 可以获取元素上当前选中的时间(Date类型)
7. 可以直接在文本框中输入日期和时间,对输入内容会自动验证
8. 支持日期、日期时间、时间三种模式
9. 可以通过点击"<,<<"或者">, >>"跳转月和年,箭头上长按鼠标可以持续跳转
10. 在input元素中滚动鼠标中键可以增加或减少输入值

三、使用指南
1. 在页面中用如下方式导入js和css文件
<head>
<link rel="stylesheet" href="datetimepicker.css"/>
<script language="javascript" src="datetimepicker.js"></script>
<script src="jquery-{any version}.js"></script><!--jquery 1.3以上版本经测试无问题 -->
</head>

2. 在页面中加入需要绑定日历的元素,假设代码为:
<input type="text" id="c" autocomplete="off"/>(注:设置autocomplete可以防止点输出框时显示历史输入)

3. 给元素绑定日历
在head部分的script标签中增加代码
<head>
<script>
 jQuery(function(){
  new DateTimePicker("c");
})
</script>
</head>
一切搞定,打开网页,效果如下:


四、API
1. 构造方法
/**
* @param target (必选项): 目标元素或目标元素Id值
* @param datetype (可选): 控件类型,可选值有: date(默认), time, datetime
* @param dateFormat (可选): function/string 用于格式化日期的函数或格式串,日期缺省格式为yyyy-MM-dd
*       如果dateFormat为函数,则使用此函数来格式化日期,eg:
*              function format(date){ //date表示当前选中的时间
*                  return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
*               }
*               new DateTimePicker(el, format);
*       如果dateFormat为string, 则表示格式模式,请使用如下格式:
*              y表示年,
*              M表示月,
*              d表示日期,
*       如:yy/MM/dd将日期格式化为08/12/31显示,而yyyy/MM/dd将日期格式化为2008/12/31显示,也可以使用y,M,d的其它组合方式。
* @param notShowDefaultValue(可选): 传入true时表示初次点击时不显示默认时间
*/
function DateTimePicker(target, datetype, dateFormat, notShowDefaultValue){}

2. 设置选中时间
当input元素有值时,日历弹出时将选中input元素中的日期,如果input元素没有值,则日历在弹出时默认选中当前时间。
我们可以使用它的如下方法
  • calendar.setSelectedDate(date);
  设置日历控件的选中时间,设置时间后关联的input元素也会以指定的格式显示这个时间。注:参数为Date类型。

3. 处理选中事件
  • inputEl.onDateChange回调函数
  我们为input元素绑定日历后,每次通过日历控件选中日期,就会触发input元素上的onDateChange函数,我们可以用如下方式定义:
  inputEl.onDateChange = function(oldDate, newDate){
            alert("from [" + oldDate+"] to ["+newDate+"]");
            alert("now date is:" + this._date);
        }
  第一参数为改变前的时间,第二个参数为新的时间,均为Date类型。
  我们还可以通过访问inputEl._date得到目标元素上当前选中的时间

4. 处理onEnterKeyDown
inputEl.onDateChange = function(){}
在日历上回车时触发。

下载地址:calendar.rar

Feedback

# re: 功能强大使用方便界面美观的js日历  回复  更多评论   

2009-12-18 09:08 by 张晓枫
不错。

# re: 功能强大使用方便界面美观的js日历  回复  更多评论   

2009-12-18 09:11 by 涂小波
很强大啊!

# re: 功能强大使用方便界面美观的js日历  回复  更多评论   

2009-12-21 11:58 by 来如风
没有农历,而且现在有关my97已经做得很好了!!

# re: 功能强大使用方便界面美观的js日历  回复  更多评论   

2009-12-21 12:16 by 非云软件
最初我也是用my97的,后来我发现了一个严重的bug,在ff的iframe下面的使用时,有时会出现问题。my97开发者也没有提供源代码,我报了bug后一直也没有给我解决,也就是这个原因,所以我开发了这个。

只有注册用户登录后才能发表评论。


网站导航:
 

posts - 9, comments - 24, trackbacks - 0, articles - 0

Copyright © terryxue