因项目需要,又找不到合适的日历控件,只好把自己几年前写的日历控件拿出来完善使用了,同时也就更新了这篇老的博客,如果你觉得喜欢的话,拿去用吧,不喜欢的话,还请给点改进的建议。
一、效果图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. 处理选中事件
我们为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(){}
在日历上回车时触发。