当前页面: 开发资料首页 → Javascript 专题 → 相当于delphi的日历控件

相当于delphi的日历控件

摘要: 相当于delphi的日历控件

file://calendar.js

YearStr = dt.getYear();
MonthStr = dt.getMonth() + 1;
NowDayStr = DayStr = dt.getDate();
week = dt.getDay();
WeekStr = WeekArr[week];
document.write("

");

function initCalendar(){
var CaleHTML="";
CaleHTML += "<table border=0 cellspacing=0 cellpadding=1 width='100%'>";
CaleHTML += "<tr bgcolor=#33246C><td>&#9668;</td>";
CaleHTML += "<td align=center>"+ YearStr +"年"+ MonthStr +"月</td>"
CaleHTML += "<td align=right>&#9658;</td></tr>";
CaleHTML += "<tr><td colspan=3>";
CaleHTML += "<table border=0 cellspacing=0 cellpadding=0 width='100%'><tr>";
for(var i=0; i CaleHTML += "<td>" + WeekArr[i] + "</td>";
}
CaleHTML += "</tr><tr><td colspan=7>

---

</td></tr>";
CaleHTML += bodyCalendar();
CaleHTML += "</table>";
CaleHTML += "</td></tr>";
CaleHTML += "<tr><td colspan=3>今天是："+ dt.getYear() +"-"+ (dt.getMonth() + 1) +"-"+ dt.getDate() +"</td></tr>";
CaleHTML += "</table>";
return CaleHTML;
}

function bodyCalendar(){
var ResultStr = "<tr>";
var tempStr = "" + MonthStr + "/1/" + YearStr;
var d = new Date(tempStr);
week_one = d.getDay();
for(var i=0;i ResultStr += "<td></td>";
}
var bYear = YearStr/4;
var maxDay;
switch(MonthStr){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
maxDay = 31;
break;
case 2:
if(bYear==0)
maxDay = 28;
else
maxDay = 29;
break;
default:
maxDay = 30;
break;
}
var k;
var bday;
for(var i=0;i

if((i+1) == DayStr)
bday = "border: #006432 1px solid;";
file://else if((i+1) == NowDayStr)
file://bday = "border: #ff0000 1px solid;";
else
bday = "border: #ffffff 1px solid;";

BRStr = i+week_one+1;
if(BRStr>=7 && BRStr%7==0){

ResultStr += "<td align=right style='cursor:hand;"+ bday +"' onmouseover='TDMove()' onmouseout='TDOut()' onclick='TDClick()'>"+ eval(i+1) +"</td></tr><tr>";
k=0;
}
else{
ResultStr += "<td align=right style='cursor:hand;"+ bday +"' onmouseover='TDMove()' onmouseout='TDOut()' onclick='TDClick()'>"+ eval(i+1) +"</td>";
k+=1;
}
}
for(var i=0;i<7-k;i++){
ResultStr += "<td></td>";
}
ResultStr += "</tr>";
return ResultStr;
}

function prevMonth(){
MonthStr -= 1;
if(MonthStr == 0){
MonthStr = 12;
YearStr -= 1;
}

idCalendar.innerHTML = initCalendar();
}

function nextMonth(){
MonthStr += 1;
if(MonthStr > 12){
MonthStr = 1;
YearStr += 1;
}
idCalendar.innerHTML = initCalendar();
}

function TDMove(){
var obj = window.event.srcElement;
obj.style.setAttribute("border", "#005AB5 1px solid");
}

function TDOut(){
var obj = event.srcElement;
if(parseInt(obj.innerText) == DayStr)
obj.style.setAttribute("border","#006432 1px solid");
file://else if(parseInt(obj.innerText) == NowDayStr)
file://obj.style.setAttribute("border","#ff0000 1px solid");
else
obj.style.setAttribute("border","#ffffff 1px solid");
}
var tobj;
function showCalendar(stype){
showtype = stype;
var obj = event.srcElement;
var pobj = obj.parentElement;
tobj = pobj.childNodes(0);
v = tobj.value;
if(v != ""){
pos = v.indexOf("-");
if(pos != -1 && pos == 4){
YearStr = parseInt(v.substring(0,pos));
v = v.substring(pos+1,v.length);
}
pos = v.indexOf("-");
if(pos != -1){
MonthStr = parseInt(v.substring(0,pos));
v = v.substring(pos+1,v.length);
}
if(v.length>0)
DayStr = parseInt(v);
}
var objParent = obj.offsetParent;
var left = obj.offsetLeft;
var top = obj.offsetTop;
while(objParent.tagName.toUpperCase() != "BODY"){
left += objParent.offsetLeft;
top += objParent.offsetTop;
objParent = objParent.offsetParent;
}
left += obj.offsetWidth;
top += obj.offsetHeight;

idCalendar.style.top = top+1;
idCalendar.style.left = left-260;
caleX = left - 260;
caleY = top + 1;
idCalendar.innerHTML = initCalendar();
idCalendar.style.display="";
hideElement("SELECT");
/*var left = event.clientX;
var top = event.clientY;
idCalendar.style.top = top+5;
idCalendar.style.left = left-250;
idCalendar.innerHTML = initCalendar();
idCalendar.style.display="";*/
}

function TDClick(){
DayStr = event.srcElement.innerText;
if(showtype=="day"){
tobj.value = YearStr + "-" + MonthStr + "-" + DayStr;
}
else{
tobj.value = YearStr + "-" + MonthStr;
}
hideCalendar();
}

function getCaleToSec(){
var dt;
if(showtype=="day")
dt = new Date(MonthStr+"/"+DayStr+"/"+YearStr);
else
dt = new Date(MonthStr+"/1/"+YearStr);
var s = dt.getTime();
return s/1000;
}

function hideCalendar(){
idCalendar.style.display = "none";
showElement("SELECT");
}

function C_MouseUp(){
if(idCalendar == null)
return;
var top = parseInt(idCalendar.style.top);
var left = parseInt(idCalendar.style.left);
var wi = idCalendar.offsetWidth;
var he = idCalendar.offsetHeight;
var x = event.clientX;
var y = event.clientY;
var x1 = left + wi;
var y1 = top + he;

if(x>x1||xy1||y hideCalendar();
showElement("SELECT");
}
}

function hideElement(elmID){
for (i = 0; i < document.all.tags(elmID).length; i++){
obj = document.all.tags(elmID)[i];
if (! obj || ! obj.offsetParent)
continue;

objLeft = obj.offsetLeft;
objTop = obj.offsetTop;
objParent = obj.offsetParent;
while (objParent.tagName.toUpperCase() != "BODY")
{
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}

if(caleX > (objLeft + obj.offsetWidth) || objLeft > (caleX + idCalendar.offsetWidth))
;
else if(objTop > (caleY + idCalendar.offsetHeight))
;
else if(caleY > (objTop + obj.offsetHeight))
;
else
obj.style.visibility = "hidden";
}
}

function showElement(elmID){
for (i = 0; i < document.all.tags(elmID).length; i++){
obj = document.all.tags(elmID)[i];
if (! obj || ! obj.offsetParent)
continue;
obj.style.visibility = "";
}
}

document.onmouseup = C_MouseUp;

<body>

&nbsp;

<form METHOD=POST ACTION="">
<table width="80%" align=center>
<tr>
<td width=150>&nbsp;</td>
<td align=center>
<input TYPE="text" NAME="day" class=bk><input TYPE="button" value=" " class=btn onclick="showCalendar('day')">
</td>
<td width=150>&nbsp;</td>
</tr>
</table>
</form>
</body>

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: Freeonline在线编辑器（自由软件）
后一篇: 对象化JS之----文件上传客户端控制脚本