Web上日历选择的HTC封装组件

Date.htm

<input type="text" style="behavior:url('Date.htc');" value="2004-01-01">

Date.htc

<public:attach event=oncontentready onevent=initDate()>

<script>

//该HTC组件目前只支持INPUT并TYPE=TEXT下使用

//日期面板容器

var vDiv=null;

//框架

var vFieldset=null;

//日期面板

var vTable=null;

//日期格式字符串

var strDate="";

//静态数组

var strWeekArray=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

function initDate()

{

//初始化日期

if(element.value)

{strDate=element.value;}

else

{strDate=getToday();}

//创建容器

vDiv=document.createElement("vDiv");

vDiv.style.position="absolute";

vDiv.style.left=0;

vDiv.style.top=0;

vDiv.style.width="275px";

//绘制框架

vFieldset=document.createElement("fieldset");

var vLegend=document.createElement("legend");

vLegend.style.font="normal 9pt 宋体";

vLegend.innerHTML="日期";

vFieldset.appendChild(vLegend);

//绘制年月栏

initYearMonthBar();

//绘制面板

initPanel();

//绘制控制区

initConsole();

vDiv.appendChild(vFieldset);

window.document.body.insertAdjacentElement("afterbegin",vDiv);

vDiv.style.display="none";

//事件绑定

element.attachEvent("onmousedown",onMouseDown);

element.readOnly="true";

}

//绘制面板

function initPanel()

{

vTable=document.createElement("table");

vTable.style.backgroundColor="#EEEEEE";

vTable.border="0";

vTable.cellSpacing="1";

vTable.cellPadding="0";

//vTable.width="80%";

vTable.style.borderLeft="1px solid #000000";

vTable.style.borderBottom="1px solid #000000";

initWeekCol();

initDayCell();

vFieldset.appendChild(vTable);

}

//画年月

function initYearMonthBar()

{

vInput=document.createElement("input");

vInput.type="button";

vInput.style.font="normal 9pt Marlett";

vInput.value="3";

vFieldset.appendChild(vInput);

vSelect=document.createElement("select");

vSelect.style.font="normal 8pt 宋体";

for(mIndex=eval("getDateYear()-20");mIndex<=eval("getDateYear()+20");mIndex++)

{

vOption=document.createElement("option");

vOption.value=mIndex;

vOption.text=mIndex+"年";

vSelect.add(vOption);

if(getDateYear()==mIndex)

{

vOption.selected="selected";

}

}

vSelect.attachEvent("onchange",onYearChange);

vFieldset.appendChild(vSelect);

vInput=document.createElement("input");

vInput.type="button";

vInput.style.font="normal 9pt Marlett";

vInput.value="4";

vFieldset.appendChild(vInput);

vInput=document.createElement("input");

vInput.type="button";

vInput.style.font="normal 9pt Marlett";

vInput.value="3";

vFieldset.appendChild(vInput);

vSelect=document.createElement("select");

vSelect.style.font="normal 8pt 宋体";

var now=new Date();

for(nIndex=1;nIndex<=12;nIndex++)

{

vOption=document.createElement("option");

vOption.value=strFormat(nIndex,2);

vOption.text=strFormat(nIndex,2)+"月";

vSelect.add(vOption);

if(getDateMonth()==nIndex)

{

vOption.selected="selected";

}

}

vSelect.attachEvent("onchange",onMonthChange);

vFieldset.appendChild(vSelect);

vInput=document.createElement("input");

vInput.type="button";

vInput.style.font="normal 9pt Marlett";

vInput.value="4";

vFieldset.appendChild(vInput);

}

//绘制控制区

function initConsole()

{

vInput=document.createElement("input");

vInput.type="button";

vInput.style.font="normal 9pt 宋体";

vInput.value="今天";

vInput.attachEvent("onmousedown",onTodayMouseDown);

vFieldset.appendChild(vInput);

vInput=document.createElement("input");

vInput.type="button";

vInput.style.font="normal 7pt Webdings";

vInput.value="a";

vInput.attachEvent("onmousedown",onOKMouseDown);

vFieldset.appendChild(vInput);

vInput=document.createElement("input");

vInput.type="button";

vInput.style.font="normal 7pt Webdings";

vInput.value="r";

vInput.attachEvent("onmousedown",onCancelMouseDown);

vFieldset.appendChild(vInput);

}

function onTodayMouseDown()

{

strDate=getToday();

element.value=strDate;

hideDate();

}

function onOKMouseDown()

{

element.value=strDate;

hideDate();

}

function onCancelMouseDown()

{

hideDate();

}

//画星期列

function initWeekCol()

{

var vTr=vTable.insertRow(0);

for(nIndex=0;nIndex<7;nIndex++)

{

var vTd=vTr.insertCell(nIndex);

vTd.innerHTML=strWeekArray[nIndex];

vTd.style.font="normal 9pt 宋体";

vTd.style.borderTop="1px solid #000000";

vTd.style.borderRight="1px solid #000000";

vTd.style.backgroundColor="#DDDDDD";

}

}

//画天单元格

function initDayCell()

{

var iCurDay=0;

for(mIndex=1;mIndex<7;mIndex++)

{

var vTr=vTable.insertRow(mIndex);

for(nIndex=0;nIndex<7;nIndex++)

{

var vTd=vTr.insertCell(nIndex);

if(mIndex==1&&nIndex==1*getYearMonthWeek())

{

iCurDay=1;

vTd.innerHTML=iCurDay;

}

else if(iCurDay!=0&&iCurDay<=1*getYearMonthDays())

{

vTd.innerHTML=iCurDay;

}

else

{

vTd.innerHTML="&nbsp;"

}

if(iCurDay==getDateDay())

{

vTd.style.color="#FF0000";

}

if(iCurDay!=0)

{

iCurDay++;

}

vTd.style.font="normal 9pt 宋体";

vTd.style.borderTop="1px solid #000000";

vTd.style.borderRight="1px solid #000000";

vTd.attachEvent("onmousedown",onCellMouseDown);

}

}

}

//选择框年鼠标按下

function onYearChange()

{

var vObject=window.event.srcElement;

var strYearMonth=strDate.split("-");

strDate=vObject.options[vObject.selectedIndex].value+"-"+strYearMonth[1]+"-"+strYearMonth[2];

for(iRowCount=6;iRowCount>=1;iRowCount--)

{

vTable.deleteRow(iRowCount);

}

initDayCell();

}

//选择框月鼠标按下

function onMonthChange()

{

var vObject=window.event.srcElement;

var strYearMonth=strDate.split("-");

strDate=strYearMonth[0]+"-"+vObject.options[vObject.selectedIndex].value+"-"+strYearMonth[2];

for(iRowCount=6;iRowCount>=1;iRowCount--)

{

vTable.deleteRow(iRowCount);

}

initDayCell();

}

//单元格天鼠标按下

function onCellMouseDown()

{

for(mIndex=1;mIndex<7;mIndex++)

{

for(nIndex=0;nIndex<7;nIndex++)

{

vTable.rows(mIndex).cells(nIndex).style.backgroundColor="transparent";

}

}

var vObject=window.event.srcElement;

var strYearMonth=strDate.split("-");

strDate=strYearMonth[0]+"-"+strYearMonth[1]+"-"+strFormat(vObject.innerHTML,2);

vObject.style.backgroundColor="#FFFFFF";

}

//元素中鼠标按下[显示面板]

function onMouseDown()

{

if(element.value)

{strDate=element.value;}

else

{strDate=getToday();}

for(iRowCount=6;iRowCount>=1;iRowCount--)

{

vTable.deleteRow(iRowCount);

}

initDayCell();

showDate();

}

//文档中鼠标按下[隐藏面板]

function onDocumentMouseDown()

{

if(element.contains(event.srcElement))

{

return;

}

if(vDiv.contains(event.srcElement))

{

return;

}

hideDate();

strDate="";

}

//库函数

//显示面板

function showDate()

{

vDiv.style.display="";

vDiv.style.left=getElementDefineLeft(element);

vDiv.style.top=getElementDefineTop(element)+element.offsetHeight;

element.document.attachEvent('onmousedown',onDocumentMouseDown);

}

//隐藏面板

function hideDate()

{

vDiv.style.display="none";

vDiv.style.left=0;

vDiv.style.top=0;

element.document.detachEvent("onmousedown",onDocumentMouseDown);

}

//取元素绝对位置Left

function getElementDefineLeft(vObject)

{

var iElementLeft=vObject.offsetLeft;

while(vObject=vObject.offsetParent)

{

iElementLeft+=vObject.offsetLeft;

}

return iElementLeft;

}

//取元素绝对位置Top

function getElementDefineTop(vObject)

{

var iElementTop=vObject.offsetTop;

while(vObject=vObject.offsetParent)

{

iElementTop+=vObject.offsetTop;

}

return iElementTop;

}

//格式化串

function strFormat(str,iLen)

{

if(str.length<iLen)

{

for(iIndex=0;iIndex<iLen-str.length;iIndex++)

{

str="0"+str;

}

return str;

}

else

{return str;}

}

//获取今天日期

function getToday()

{

var vNow=new Date();

return strFormat(vNow.getYear(),4)+"-"+strFormat(vNow.getMonth()+1,2)+"-"+strFormat(vNow.getDate(),2);

}

//计算某年某月某日返回年

function getDateYear()

{

var strYearMonth=strDate.split("-");

return eval("1*strYearMonth[0]");

}

//计算某年某月某日返回月

function getDateMonth()

{

var strYearMonth=strDate.split("-");

return eval("1*strYearMonth[1]");

}

//计算某年某月某日返回日

function getDateDay()

{

var strYearMonth=strDate.split("-");

return eval("1*strYearMonth[2]");

}

//计算某年某月第一天是星期几

function getYearMonthWeek()

{

var strYearMonth=strDate.split("-");

var vDate=new Date(strYearMonth[0],parseInt(strYearMonth[1])-1,1);

return vDate.getDay();

}

//计算某年某月天数

function getYearMonthDays()

{

var strYearMonth=strDate.split("-");

var vDate=new Date(strYearMonth[0],strYearMonth[1],"0");

return vDate.getDate();

}

//

//闰年的条件是:能被4整除且不能被100整除,或能被400整除的年份是闰年.

//

</script>

</public:attach>

• ·浅谈JAVA VM 发展（作者：黄敬群）
• ·Virtual PC 5.2 试用手记
• ·javaRMI使用入门程序及配置
• ·Web上功能强大的DbGrid表格HTC组件[
• ·Textarea标签封装为Web在线编辑器
• ·Web上的通用对话框封装
• ·rhas3.0 + qmail + mysql
• ·FTP的设置
• ·Java & xml学习笔记 SAX篇
• ·使用poi操作Excel的几点注意事项