一个js对日历插件时间的校验

上面的js文件继续如下：Calendar.prototype.bindData = function () {
var calendar = this;
var dateArray = this.getMonthViewDateArray(this.date.getFullYear(), this.date.getMonth());
var tds = this.getElementsByTagName("td", this.getElementById("__calendarTable", this.iframe.document));
for(var i = 0; i < tds.length; i++) {
   tds[i].style.backgroundColor = calendar.colors["bg_over"];
tds[i].onclick = null;
tds[i].onmouseover = null;
tds[i].onmouseout = null;
tds[i].innerHTML = dateArray[i] || " ";
if (i > dateArray.length - 1) continue;
if (dateArray[i]){
tds[i].onclick = function () {
if (calendar.dateControl){
calendar.dateControl.value = new Date(calendar.date.getFullYear(),
calendar.date.getMonth(),
this.innerHTML).format(calendar.date2StringPattern);
}
calendar.hide();
}
tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}
tds[i].onmouseout  = function () {this.style.backgroundColor = calendar.colors["bg_over"];}
var today = new Date();
if (today.getFullYear() == calendar.date.getFullYear()) {
if (today.getMonth() == calendar.date.getMonth()) {
if (today.getDate() == dateArray[i]) {
tds[i].style.backgroundColor = calendar.colors["bg_cur_day"];
tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}
tds[i].onmouseout  = function () {this.style.backgroundColor = calendar.colors["bg_cur_day"];}
}
}
}
}//end if
}//end for
};Calendar.prototype.getMonthViewDateArray = function (y, m) {
var dateArray = new Array(42);
var dayOfFirstDate = new Date(y, m, 1).getDay();
var dateCountOfMonth = new Date(y, m + 1, 0).getDate();
for (var i = 0; i < dateCountOfMonth; i++) {
dateArray[i + dayOfFirstDate] = i + 1;
}
return dateArray;
};
Calendar.prototype.show = function (dateControl, popuControl) {
if (this.panel.style.visibility == "visible") {
this.panel.style.visibility = "hidden";
}
if (!dateControl){
throw new Error("arguments[0] is necessary!")
}
this.dateControl = dateControl;
popuControl = popuControl || dateControl; this.draw();
this.bindYear();
this.bindMonth();
if (dateControl.value.length > 0){
this.date  = new Date(dateControl.value.toDate(this.patternDelimiter, this.string2DatePattern));
this.year  = this.date.getFullYear();
this.month = this.date.getMonth();
}
this.changeSelect();
this.bindData(); var xy = this.getAbsPoint(popuControl);
this.panel.style.left = xy.x + "px";
this.panel.style.top = (xy.y + dateControl.offsetHeight) + "px";
this.panel.style.visibility = "visible";
};Calendar.prototype.hide = function() {
this.panel.style.visibility = "hidden";
};Calendar.prototype.getElementById = function(id, object){
object = object || document;
return document.getElementById ? object.getElementById(id) : document.all(id);
};Calendar.prototype.getElementsByTagName = function(tagName, object){
object = object || document;
return document.getElementsByTagName ? object.getElementsByTagName(tagName) : document.all.tags(tagName);
};Calendar.prototype.getAbsPoint = function (e){
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent){
x += e.offsetLeft;
y += e.offsetTop;
}
return {"x": x, "y": y};
};/**
* @param   d the delimiter
* @param   p the pattern of your date
* @author  meizz
* @author  kimsoft add w+ pattern
*/
Date.prototype.format = function(style) {
var o = {
"M+" : this.getMonth() + 1, //month
"d+" : this.getDate(),      //day
"h+" : this.getHours(),     //hour
"m+" : this.getMinutes(),   //minute
"s+" : this.getSeconds(),   //second
"w+" : "\u65e5\u4e00\u4e8c\u4e09\u56db\u4e94\u516d".charAt(this.getDay()),   //week
"q+" : Math.floor((this.getMonth() + 3) / 3),  //quarter
"S"  : this.getMilliseconds() //millisecond
}
if (/(y+)/.test(style)) {
style = style.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for(var k in o){
if (new RegExp("("+ k +")").test(style)){
style = style.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return style;
};/**
* @param d the delimiter
* @param p the pattern of your date
* @rebuilder kimsoft
* @version build 2006.12.15
*/
String.prototype.toDate = function(delimiter, pattern) {
delimiter = delimiter || "-";
pattern = pattern || "ymd";
var a = this.split(delimiter);
var y = parseInt(a[pattern.indexOf("y")], 10);
//remember to change this next century ;)
if(y.toString().length <= 2) y += 2000;
if(isNaN(y)) y = new Date().getFullYear();
var m = parseInt(a[pattern.indexOf("m")], 10) - 1;
var d = parseInt(a[pattern.indexOf("d")], 10);
if(isNaN(d)) d = 1;
return new Date(y, m, d);
};document.writeln('<div id="__calendarPanel" style="position:absolute;visibility:hidden;z-index:9999;background-color:#FFFFFF;border:1px solid #666666;width:200px;height:216px;">');
document.writeln('<iframe name="__calendarIframe" id="__calendarIframe" width="100%" height="100%" scrolling="no" frameborder="0" style="margin:0px;"><\/iframe>');
var __ci = window.frames['__calendarIframe'];
__ci.document.writeln('<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">');
__ci.document.writeln('<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');
__ci.document.writeln('<head>');
__ci.document.writeln('<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>');
__ci.document.writeln('<title>Web Calendar(UTF-8) Written By KimSoft<\/title>');
__ci.document.writeln('<style type="text\/css">');
__ci.document.writeln('');
__ci.document.writeln('<\/style>');
__ci.document.writeln('<\/head>');
__ci.document.writeln('<body>');
__ci.document.writeln('<\/body>');
__ci.document.writeln('<\/html>');
__ci.document.close();
document.writeln('<\/div>');
var calendar = new Calendar();
//-->
html调用： <li>
<input onclick="new Calendar().show(this);" name="startDate" type="text" id="startDate" style=""  readonly="readonly"/>
<span style="width:auto;line-height:26px;height:26px;">至</span>

<input name="endDate" type="text" id="endDate" style=""  readonly="readonly"/><br/>
<span class="bered" style="width:auto;color: red">*</span>
<span class="alerttitle"  style="width:auto;"></span>
</li>

现在需要通过一个事件来判断拿到的日历插件赋给 startDate的和endDate的input框，然后在alerttitle 的span里面给予一些校验，比如 startDate的和endDate的input框不能为空， startDate不能大于endDate等等，现在我采用Jquery的change事件，没有任何反应，使用mouseover和mouseout事件，出现他们只在点击输入框是触发，出来时间控件后复制给input框，但是这些事件都控制不了，时间控件选定时间后复制给input框，这能用什么事件或者怎么通过事件来校验这个input框有数值和没数值的情况，谢谢!

想实现的效果就是，当时间通过日期插件写入input时，触发一个事件来监听到input框里面有数据了从而可以对数据进行校验，（比如 startDate的和endDate的input框不能为空， startDate不能大于endDate等等），然后把校验结果写入input后的span里面。看起来很简单，但是由于使用了日期插件，像input框的onchange事件不能用了，还有Jquery的blur事件也不能用，觉得有点奇怪，看了一下日期插件的源码，还是不得其解，请各位朋友指点迷津。谢谢

Calendar.prototype.bindData = function () {
...
    for(var i = 0; i < tds.length; i++) {
...
            tds[i].onclick = function () {
                var d = new Date(calendar.date.getFullYear(),
                                                        calendar.date.getMonth(),
                                                        this.innerHTML).format(calendar.date2StringPattern);
                if (calendar.dateControl){
                    calendar.dateControl.value = d;
                }
                calendar.hide();
                //添加一個選擇日期后的回調
                callback.call(calendar, d);
            }
...
        }//end if
    }//end for
};

HI 请教一下，在Calendar 类外面怎么设置这个回调函数呢？回调函数不懂了，谢谢！

首先这个回调函数怎么实现我还没有很好的办法，其次就是有了这个回调函数，但这个回调函数是在时间组件的上的时间被选后即onlick事件时发生的（这时input框的onlick事件已经触发完了），处理不了这个回调函数产生的结果。所以这样我认为也没有效果，不知道仁兄怎么看？

调试易

一个js对日历插件时间的校验

解决方案 »