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();