HTC日历的第一个修正版本出来了,欢迎大家测试,下一个修正版在两周后推出

Question

//公用函数开始
function KeyFilter(type)
{
event.returnValue=(event.keyCode>=48 && event.keyCode<=57)
}//////////////////////
//日期类扩展函数开始//
function date_format(sFormat)
{
var dt=this;
if(sFormat==null || typeof(sFormat)!="string")
sFormat="";
sFormat=sFormat.replace(/yyyy/ig,dt.getFullYear());
var y=""+dt.getYear();
if(y.length>2)
{
y=y.substring(y.length-2,y.length);
}
sFormat=sFormat.replace(/yy/ig,y);
sFormat=sFormat.replace(/mm/ig,dt.getMonth()+1);
sFormat=sFormat.replace(/dd/ig,dt.getDate());
return sFormat;
}
function date_clone()
{
return new Date(this.getFullYear(),this.getMonth(),this.getDate());
}
function date_compare(dtCompare)
{
var dt=this;
var hr=0;
if(dt && dtCompare)
{
if(dt.getFullYear()>dtCompare.getFullYear())
hr=1;
else if(dt.getFullYear()<dtCompare.getFullYear())
hr=-1;
else if(dt.getMonth()>dtCompare.getMonth())
hr=1;
else if(dt.getMonth()<dtCompare.getMonth())
hr=-1;
else if(dt.getDate()>dtCompare.getDate())
hr=1;
else if(dt.getDate()<dtCompare.getDate())
hr=-1;
}
return hr;
}
function date_getDateFromVT_DATE(dt)
{
dt=dt.replace(/-/g,"/");
dt=Date.parse(dt);
if(isNaN(dt))
dt=null;
else
dt=new Date(dt);
return dt;
}
function initDateObject()
{
Date.prototype.compare=date_compare;
Date.prototype.clone=date_clone;
Date.prototype.format=date_format;
}
//日期类扩展函数结束//
//////////////////////
////////////////
//日历函数开始//
function dp_getValidDate(lYear,lMonth,lDay)
{
var dt=new Date();
if(lYear==null || isNaN(parseInt(lYear,10)))
lYear=dt.getFullYear();
else
lYear=parseInt(lYear,10);
if(lMonth==null || isNaN(parseInt(lMonth,10)))
lMonth=dt.getMonth();
else
lMonth=parseInt(lMonth,10)-1;
if(lDay==null || isNaN(parseInt(lDay,10)))
lDay=dt.getDate();
else
lDay=parseInt(lDay,10);
dt=new Date(lYear,lMonth,lDay);
var cdMax=new Date(cl_dpMaxYear,cl_dpMaxMonth,cl_dpMaxDay);
var cdMin=new Date(cl_dpMinYear,cl_dpMinMonth,cl_dpMinDay);
if(dt.compare(cdMax)>0 || dt.compare(cdMin)<0)
dt=null;
return dt;
}
function dp_onDateChange()
{
dp_refreshView();
element.value=oDateObject.format(vt_dpFormat);
oEvent=createEventObject();
eventID.fire(oEvent);
}function dp_refreshView()
{
var hr=false;
if(oDateObject!=null)
{
oYearInput.value=oDateObject.getFullYear();
oMonthInput.value=oDateObject.getMonth()+1;
oDayInput.value=oDateObject.getDate();
hr=true;
}
return hr;
}
function dp_setCurDate(lYear,lMonth,lDay)
{
var hr=false;
lYear=parseInt(lYear,10);
lMonth=parseInt(lMonth,10);
lDay=parseInt(lDay,10);
if(!(isNaN(lYear) || isNaN(lMonth) || isNaN(lDay)))
{
var dt=new Date(lYear,lMonth-1,lDay);
var dMax=new Date(cl_dpMaxYear,cl_dpMaxMonth,cl_dpMaxDay);
var dMin=new Date(cl_dpMinYear,cl_dpMinMonth,cl_dpMinDay);
if(dt.compare(dMax)<=0 && dt.compare(dMin)>=0)
{
oDateObject=dt;
window.frames[theName].CurrentDate=oDateObject.clone();
window.frames[theName].dp_initDropDown();
dp_onDateChange();
hr=true;
}
}
if(!hr)
dp_refreshView();
return hr;
}
//日历函数结束//
////////////////
//日历事件处理开始//
function dp_keyDown(srcType)
{
var bRefresh=true;
var lYear=oDateObject.getFullYear();
var lMonth=oDateObject.getMonth();
var lDay=oDateObject.getDate();
var lStep=0;
switch(event.keyCode)
{
case 38:
lStep=1;
break;
case 40:
lStep=-1;
break;
case 13:
event.keyCode=9;
break;
default:
bRefresh=false;
}
switch(srcType)
{
case 'year':
lYear+=lStep;
break;
case 'month':
lMonth+=lStep;
break;
case 'day':
lDay+=lStep;
break;
default:;
}
if(bRefresh)
dp_setCurDate(lYear,lMonth+1,lDay);
event.returnValue=true;
}
function dp_focus(srcType)
{
switch(srcType)
{
case 'year':
break;
case 'month':
break;
case 'day':
break;
default:;
}
event.srcElement.select();
event.returnValue=true;
}
function dp_blur(srcType)
{
var lYear=oDateObject.getFullYear();
var lMonth=oDateObject.getMonth()+1;
var lDay=oDateObject.getDate();
var val=parseInt(event.srcElement.value,10);
if(isNaN(val))
val=-1;
switch(srcType)
{
case 'year':
lYear=val==-1?lYear:val;
break;
case 'month':
lMonth=val==-1?lMonth:val;
break;
case 'day':
lDay=val==-1?lDay:val;
break;
default:;
}
dp_setCurDate(lYear,lMonth,lDay);
if(val==-1)
dp_refreshView();
return true;
}
//日历事件处理结束//
////////////////////
function dp_getMonthName(lMonth)
{
var mnArr=new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');
return mnArr[lMonth];
};
function dp_showDataTable()
{
if(oDateIframe.style.display=="block"||oDateIframe.style.display=="")
{
if(event.srcElement.tagName=="A"||event.type=="keydown"||event.type=="dblclick")
{
oDateIframe.style.display="none";
}
}
else if(oDateIframe.style.display=="none")
{
if(event.srcElement.tagName=="A")
{
if(oDateIframe.style.left=="" && oDateIframe.style.top=="");
{
oDateIframe.style.offsetLeft=event.clientX
oDateIframe.style.offsetTop=event.clientY;
}
}
oDateIframe.style.display="block";
if(event.type!="keydown")
{
oDateTable=window.frames[theName].document.all.DateTable;
for(i=0;i<oDateTable.cells.length;i++)
{
if(oDateTable.cells[i].className=="DPCellCurrent" || oDateTable.cells[i].className=="DPCell")
{
if(parseInt(oDateTable.cells[i].innerText)!=parseInt(oDayInput.value))
{
oDateTable.cells[i].innerHTML=oDateTable.cells[i].innerText;
}
else
{
oDateTable.cells[i].innerHTML="<font color=red>" + oDateTable.cells[i].innerText + "</font>"
}
}
}
}
}
//alert(theName)
}
//共用函数结束

Answer 1

function Init()
{
initDateObject();
element.readOnly=true;
element.value=oDateObject.format(vt_dpFormat);
oDatePicker=this.document.createElement("span");
oDatePicker.className="DPFrame";
oDatePicker.id=oDatePicker.uniqueID;
oDatePicker=element.parentNode.appendChild(oDatePicker);
oYearInput=element.document.createElement("input");
oYearInput.className="DPYear";
oYearInput.size=4;
oYearInput.maxLength=4;
oYearInput.value=oDateObject.getFullYear();
oYearInput.disabled=element.disabled;
oYearInput.attachEvent('onkeypress',new Function("KeyFilter('number')"));
oYearInput.attachEvent('onkeydown',new Function("dp_keyDown('year')"));
oYearInput.attachEvent('onfocus',new Function("dp_focus('year')"));
oYearInput.attachEvent('onblur',new Function("dp_blur('year')"));
oDatePicker.appendChild(oYearInput);
oYear=element.document.createElement("font");
oYear.className="DPYearDes";
oYear.innerText="年";
oDatePicker.appendChild(oYear);
oMonthInput=this.document.createElement("input");
oMonthInput.className="DPMonth";
oMonthInput.size=2;
oMonthInput.maxLength=2;
oMonthInput.value=oDateObject.getMonth()+1;
oMonthInput.disabled=element.disabled;
oMonthInput.attachEvent('onkeypress',new Function("KeyFilter('number')"));
oMonthInput.attachEvent('onkeydown',new Function("dp_keyDown('month')"));
oMonthInput.attachEvent('onfocus',new Function("dp_focus('month')"));
oMonthInput.attachEvent('onblur',new Function("dp_blur('month')"));
oDatePicker.appendChild(oMonthInput);
oMonth=element.document.createElement("font");
oMonth.className="DPMonthDes";
oMonth.innerText="月";
oDatePicker.appendChild(oMonth);
oDayInput=this.document.createElement("input");
oDayInput.className="DPDay";
oDayInput.size=2;
oDayInput.maxLength=2;
oDayInput.value=oDateObject.getDate();
oDayInput.disabled=element.disabled;
oDayInput.attachEvent('onkeypress',new Function("KeyFilter('number')"));
oDayInput.attachEvent('onkeydown',new Function("dp_keyDown('day')"));
oDayInput.attachEvent('onfocus',new Function("dp_focus('day')"));
oDayInput.attachEvent('onblur',new Function("dp_blur('day')"));
oDatePicker.appendChild(oDayInput);
oDay=element.document.createElement("font");
oDay.className="DPDayDes";
oDay.innerText="日";
oDatePicker.appendChild(oDay);
oSelectSapn=this.document.createElement("font");
oSelectSapn.className="DPSep"
oDatePicker.appendChild(oSelectSapn);
oDateIframe=element.document.createElement("iframe");
oDateIframe.style.display="none";
oDateIframe.style.position="absolute";
oDateIframe=oDatePicker.appendChild(oDateIframe);
theName=oDateIframe.uniqueID;
oDateSelect=this.document.createElement("A");
oDateSelect.className="DPDropBtn";
oDateSelect.href="javascript:void(0)";
oDateSelect.size=12;
oDateSelect.innerText="▼";
oDateSelect.attachEvent('onclick',new Function('dp_showDataTable();window.frames[theName].InitIframe();'));
oDatePicker.appendChild(oDateSelect);
sHTML="<link rel=stylesheet type='text/css' href='DatePicker.css'>"
sHTML+="<SCRIPT language=javascript>\n"
sHTML+="var BindingObject=parent.document.all('" + element.uniqueID + "');\n"
sHTML+="var oDateIframe=parent.document.all('" + oDateIframe.uniqueID + "');\n"
sHTML+="var CurrentDate=BindingObject.value;\n"
sHTML+="var curCell=null;\n"
sHTML+=dp_getMonthName.toString() + ";\n";
sHTML+=dp_showDataTable.toString() + ";\n";
sHTML+="function dp_initDropDown()\n"
sHTML+="{\n"
sHTML+=" var ddt=document.all.DateTable;\n"
sHTML+=" var cell=null;\n"
sHTML+=" var dt=new Date(CurrentDate.getFullYear(),CurrentDate.getMonth(),1);\n"
sHTML+=" cell=ddt.rows[0].cells[1];\n"
sHTML+=" if(cell)\n"
sHTML+=" {\n"
sHTML+=" cell.innerText=dp_getMonthName(CurrentDate.getMonth())+' '+CurrentDate.getFullYear();\n"
sHTML+=" }\n"
sHTML+=" var wd=dt.getDay();\n"
sHTML+=" dt=new Date(dt.getFullYear(),dt.getMonth(),1-wd);\n"
sHTML+=" var day=dt.getDate();\n"
sHTML+=" for(var i=2; i<8; i++)\n"
sHTML+=" {\n"
sHTML+=" for(var j=0; j<7; j++)\n"
sHTML+=" {\n"
sHTML+=" cell=ddt.rows[i].cells[j];\n"
sHTML+=" if(cell)\n"
sHTML+=" {\n"
sHTML+=" if(dt.getMonth()!=CurrentDate.getMonth())\n"
sHTML+=" {\n"
sHTML+=" cell.className='DPCellOther'\n"
sHTML+=" }\n"
sHTML+=" else if(dt.valueOf()==CurrentDate.valueOf())\n"
sHTML+=" {\n"
sHTML+=" cell.className='DPCell'\n"
sHTML+=" }\n"
sHTML+=" else\n"
sHTML+=" {\n"
sHTML+=" cell.className='DPCell';\n"
sHTML+=" }\n"
sHTML+=" cell.innerHTML=day;\n"
sHTML+=" cell.year=dt.getFullYear();\n"
sHTML+=" cell.month=dt.getMonth();\n"
sHTML+=" dt.setDate(day+1);\n"
sHTML+=" day=dt.getDate();\n"
sHTML+=" }\n"
sHTML+=" }\n"
sHTML+=" }\n"
sHTML+="};\n"
sHTML+="function dp_monthChange(lStep)\n"
sHTML+="{\n"
sHTML+=" var dt=BindingObject;\n"
sHTML+=" var odt=new Date(BindingObject.value);\n"
sHTML+=" var lOldMonth=odt.getMonth();\n"
sHTML+=" var lOldDay=odt.getDate();\n"
sHTML+=" dt.Day=1;\n"
sHTML+=" dt.Month=lOldMonth+lStep+1;\n"
sHTML+=" dt.Day=0;\n"
sHTML+=" var ndt=new Date(BindingObject.value);\n"
sHTML+=" if(ndt.getDate()>lOldDay)\n"
sHTML+=" dt.Day=lOldDay;\n"
sHTML+=" CurrentDate=new Date(BindingObject.value);\n"
sHTML+= " dp_initDropDown();\n"
sHTML+="};\n"
sHTML+="function dp_ddt_click()\n"
sHTML+="{"
sHTML+=" BindingObject.Year=event.srcElement.year;\n"
sHTML+=" BindingObject.Month=event.srcElement.month;\n"
sHTML+=" BindingObject.Day=event.srcElement.innerText;\n"
sHTML+="};\n"
sHTML+="<" + "/SCRIPT>\n"

Answer 2

sHTML+="<BODY scroll=no bottomMargin=0 topMargin=0 leftMargin=0 rightMargin=0 onkeydown='dp_showDataTable();'>\n"
sHTML+="<TABLE border=1 cellspacing=0 cellpadding=0 id=DateTable class=clock>\n"
sHTML+="<TR class=DPTitle>\n"
sHTML+="<TD align=center class=DPBtn style='padding-right:0;cursor:hand;' onclick='dp_monthChange(-1)' ondblclick='dp_monthChange(-1)' title=上月><<</TD>\n"
var dt=oDateObject.clone();
var wd=oDateObject.getDay();
dt=new Date(oDateObject.getFullYear(),oDateObject.getMonth(),1-wd);
sHTML+="<TD align=center colspan=5 class=DPCurrentMonth>" + dp_getMonthName(oDateObject.getMonth()) + " " + oDateObject.getFullYear() + "</TD>\n"
sHTML+="<TD align=center class=DPBtn style='cursor:hand;' onclick='dp_monthChange(1)' ondblclick='dp_monthChange(1)' title=下月>>></TD>\n"
sHTML+="</TR>\n"
sHTML+="<TR>\n"
sHTML+="<TD class=DPWeekName>日</TD><TD class=DPWeekName>一</TD><TD class=DPWeekName>二</TD>\n"
sHTML+="<TD class=DPWeekName>三</TD><TD class=DPWeekName>四</TD><TD class=DPWeekName>五</TD><TD class=DPWeekName>六</TD>\n"
sHTML+="</TR>\n"
var day=dt.getDate();
for(i=0;i<6;i++)
{
sHTML+="<TR>"
for(j=0;j<7;j++)
{
sColor="";
if(dt.getMonth()!=oDateObject.getMonth())
{
_className="DPCellOther"
}
else
{
if(dt.valueOf()==oDateObject.valueOf())
{
_className="DPCell"
}
else
{
_className="DPCell";
}
}
sHTML+="<TD onmouseover='dp_ddt_click()' ondblclick=\"dp_showDataTable()\" class=" + _className + " align=center year='" + dt.getFullYear() + "' month='" + dt.getMonth() + "'>" + day + "</TD>\n";
dt.setDate(day+1);
day=dt.getDate();
}
sHTML+="</TR>\n"
}
sHTML+="</TABLE>\n"
sHTML+="</BODY>\n"
sHTML+="<SCRIPT language=javascript DEFER>\n"
sHTML+="function InitIframe()\n"
sHTML+="{\n"
sHTML+=" if(parent.document.all('" + theName + "').height=='' && parent.document.all('" + theName + "').width=='')\n"
sHTML+=" {\n"
sHTML+=" parent.document.all('" + theName + "').height=parseInt(document.all.DateTable.scrollHeight)+5;\n"
sHTML+=" parent.document.all('" + theName + "').width=parseInt(document.all.DateTable.scrollWidth)+5;\n"
sHTML+=" }\n"
sHTML+="};\n"
sHTML+="<" + "/SCRIPT>\n"
window.frames[theName].document.write(sHTML);
window.frames[theName].document.close();
}
</SCRIPT>
</PUBLIC:COMPONENT>

Answer 3

DatePicker.CSS.DPTitle
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    COLOR: #000000;
    LINE-HEIGHT: normal;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: #c9f1f1;
    TEXT-ALIGN: center;
    FONT-VARIANT: normal
}
.DPWeekName
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    COLOR: #00008b;
    LINE-HEIGHT: normal;
    BORDER-BOTTOM: black 1px solid;
    FONT-STYLE: normal;
    TEXT-ALIGN: center;
    FONT-VARIANT: normal
}
.DPCellOther
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    WIDTH: 0pt;
    CURSOR: hand;
    COLOR: silver;
    LINE-HEIGHT: normal;
    FONT-STYLE: normal;
    TEXT-ALIGN: center;
    FONT-VARIANT: normal
}
.DPCellCurrent
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 11pt;
    WIDTH: 0pt;
    CURSOR: hand;
    COLOR: #f0408b;
    LINE-HEIGHT: normal;
    FONT-STYLE: normal;
    TEXT-ALIGN: center;
    FONT-VARIANT: normal
}
.DPCell
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    WIDTH: 0pt;
    CURSOR: hand;
    COLOR: #00008b;
    LINE-HEIGHT: normal;
    FONT-STYLE: normal;
    TEXT-ALIGN: center;
    FONT-VARIANT: normal
}
.DPCellSelect
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    WIDTH: 10pt;
    CURSOR: hand;
    COLOR: #000000;
    LINE-HEIGHT: normal;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: #ffa07a;
    TEXT-ALIGN: center;
    FONT-VARIANT: normal
}
.DPYear
{
    BORDER-RIGHT: 1px;
    BORDER-TOP: 1px;
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    BORDER-LEFT: 1px;
    COLOR: blue;
    LINE-HEIGHT: normal;
    BORDER-BOTTOM: 1px;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: right;
    FONT-VARIANT: normal
}
.DPYearDes
{
    BACKGROUND-COLOR: transparent
}
.DPMonth
{
    BORDER-RIGHT: 0px;
    BORDER-TOP: 0px;
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    BORDER-LEFT: 0px;
    COLOR: blue;
    LINE-HEIGHT: normal;
    BORDER-BOTTOM: 0px;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: right;
    FONT-VARIANT: normal
}
.DPMonthDes
{
    WIDTH: 10pt;
    BACKGROUND-COLOR: transparent
}
.DPDay
{
    BORDER-RIGHT: 0px;
    BORDER-TOP: 0px;
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    BORDER-LEFT: 0px;
    COLOR: blue;
    LINE-HEIGHT: normal;
    BORDER-BOTTOM: 0px;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: right;
    FONT-VARIANT: normal
}
.DPDayDes
{
    WIDTH: 10pt;
    BACKGROUND-COLOR: transparent
}
.DPSep
{
    WIDTH: 10px;
    BACKGROUND-COLOR: transparent
}
A.DPDropBtn:link
{
    COLOR: blue;
    TEXT-DECORATION: none
}
A.DPDropBtn:visited
{
    COLOR: #000000;
    TEXT-DECORATION: none
}
A.DPDropBtn:hover
{
    COLOR: blue;
    TEXT-DECORATION: none
}
.DPBtn
{
    BORDER-TOP: white 1px solid;
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    BORDER-LEFT: medium none;
    COLOR: black;
    LINE-HEIGHT: normal;
    BORDER-BOTTOM: salmon 1px solid;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: lightblue;
    FONT-VARIANT: normal
}

Answer 4

以下是测试页
DATE_PICKER.HTM
<iframe name=test src="Date_picker2.HTM" height=500 width=400></iframe>
<INPUT id=xx style="behavior:url(DATE_PICKER.HTC)" type=hidde DateValue="1999/09/09" ondatechange="alert('value chaged')">DATE_PICKER2.HTM
<INPUT id=xx style="behavior:url(DATE_PICKER.HTC)" type=hidde DateValue="1999/09/09" ondatechange="alert('value chaged 2')">

Answer 5

该版本修正了上一版本的速度问题.
去掉了一些不必要的页面元素.
增加了鼠标移动选择日期的功能.
并且将显示部分完全独立出来使用CSS控制显示风格下一版本将增加时分秒录入和对象禁用功能

Answer 6

含框架的演示页
http://www.mooey.com/datepicker/DATE_PICKER.HTM
独立的演示页
http://www.mooey.com/datepicker/DATE_PICKER2.HTM

Answer 7

由于本人美工功底差,做得并不好看,但是使用CSS作一下加工,页面效果应该不会差的

Answer 8

下一个版本的效果预期如下:
http://www.ewayteam.com/pk/date.htm

Answer 9

提示：类不支持automation操作（ie5)

Answer 10

是的，打不开，我以前写过一个用到iframe作载体的，在ie5下也是有这提示还记得那次问过你，你正在出差吗？

Answer 11

这个问题有点奇怪。以前的htc日历也是用的document.write没问题的,这次居然报错了。
郁闷ing

Answer 12

function Init()
{
initDateObject();
element.readOnly=true;
element.value=oDateObject.format(vt_dpFormat);
oDatePicker=this.document.createElement("span");
oDatePicker.className="DPFrame";
oDatePicker.id=oDatePicker.uniqueID;
oDatePicker=element.parentNode.appendChild(oDatePicker);
oYearInput=element.document.createElement("input");
oYearInput.className="DPYear";
oYearInput.size=4;
oYearInput.maxLength=4;
oYearInput.value=oDateObject.getFullYear();
oYearInput.disabled=element.disabled;
oYearInput.attachEvent('onkeypress',new Function("KeyFilter('number')"));
oYearInput.attachEvent('onkeydown',new Function("dp_keyDown('year')"));
oYearInput.attachEvent('onfocus',new Function("dp_focus('year')"));
oYearInput.attachEvent('onblur',new Function("dp_blur('year')"));
oDatePicker.appendChild(oYearInput);
oYear=element.document.createElement("font");
oYear.className="DPYearDes";
oYear.innerText="年";
oDatePicker.appendChild(oYear);
oMonthInput=this.document.createElement("input");
oMonthInput.className="DPMonth";
oMonthInput.size=2;
oMonthInput.maxLength=2;
oMonthInput.value=oDateObject.getMonth()+1;
oMonthInput.disabled=element.disabled;
oMonthInput.attachEvent('onkeypress',new Function("KeyFilter('number')"));
oMonthInput.attachEvent('onkeydown',new Function("dp_keyDown('month')"));
oMonthInput.attachEvent('onfocus',new Function("dp_focus('month')"));
oMonthInput.attachEvent('onblur',new Function("dp_blur('month')"));
oDatePicker.appendChild(oMonthInput);
oMonth=element.document.createElement("font");
oMonth.className="DPMonthDes";
oMonth.innerText="月";
oDatePicker.appendChild(oMonth);
oDayInput=this.document.createElement("input");
oDayInput.className="DPDay";
oDayInput.size=2;
oDayInput.maxLength=2;
oDayInput.value=oDateObject.getDate();
oDayInput.disabled=element.disabled;
oDayInput.attachEvent('onkeypress',new Function("KeyFilter('number')"));
oDayInput.attachEvent('onkeydown',new Function("dp_keyDown('day')"));
oDayInput.attachEvent('onfocus',new Function("dp_focus('day')"));
oDayInput.attachEvent('onblur',new Function("dp_blur('day')"));
oDatePicker.appendChild(oDayInput);
oDay=element.document.createElement("font");
oDay.className="DPDayDes";
oDay.innerText="日";
oDatePicker.appendChild(oDay);
oSelectSapn=this.document.createElement("font");
oSelectSapn.className="DPSep"
oDatePicker.appendChild(oSelectSapn);
oDateSelect=this.document.createElement("A");
oDateSelect.className="DPDropBtn";
oDateSelect.href="javascript:void(0)";
oDateSelect.size=12;
oDateSelect.innerText="▼";
oDateSelect.attachEvent('onclick',new Function('dp_showDataTable();window.frames[theName].InitIframe();'));
oDatePicker.appendChild(oDateSelect);
oDateIframe=element.document.createElement("iframe");
oDateIframe.style.display="none";
oDateIframe.style.position="absolute";
oDateIframe=oDatePicker.appendChild(oDateIframe);
theName=oDateIframe.uniqueID;
sHTML="<iframe style='display:none' name=" + theName +" src='about:blank'></iframe>";
oDateIframe.outerHTML=sHTML;

Answer 13

sHTML="<link rel=stylesheet type='text/css' href='DatePicker.css'>"
sHTML+="<SCRIPT language=javascript>\n"
sHTML+="var BindingObject=parent.document.all('" + element.uniqueID + "');\n"
sHTML+="var oDateIframe=parent.document.all('" + oDateIframe.uniqueID + "');\n"
sHTML+="var CurrentDate=BindingObject.value;\n"
sHTML+="var curCell=null;\n"
sHTML+=dp_getMonthName.toString() + ";\n";
sHTML+=dp_showDataTable.toString() + ";\n";
sHTML+="function dp_initDropDown()\n"
sHTML+="{\n"
sHTML+=" var ddt=document.all.DateTable;\n"
sHTML+=" var cell=null;\n"
sHTML+=" var dt=new Date(CurrentDate.getFullYear(),CurrentDate.getMonth(),1);\n"
sHTML+=" cell=ddt.rows[0].cells[1];\n"
sHTML+=" if(cell)\n"
sHTML+=" {\n"
sHTML+=" cell.innerText=dp_getMonthName(CurrentDate.getMonth())+' '+CurrentDate.getFullYear();\n"
sHTML+=" }\n"
sHTML+=" var wd=dt.getDay();\n"
sHTML+=" dt=new Date(dt.getFullYear(),dt.getMonth(),1-wd);\n"
sHTML+=" var day=dt.getDate();\n"
sHTML+=" for(var i=2; i<8; i++)\n"
sHTML+=" {\n"
sHTML+=" for(var j=0; j<7; j++)\n"
sHTML+=" {\n"
sHTML+=" cell=ddt.rows[i].cells[j];\n"
sHTML+=" if(cell)\n"
sHTML+=" {\n"
sHTML+=" if(dt.getMonth()!=CurrentDate.getMonth())\n"
sHTML+=" {\n"
sHTML+=" cell.className='DPCellOther'\n"
sHTML+=" }\n"
sHTML+=" else if(dt.valueOf()==CurrentDate.valueOf())\n"
sHTML+=" {\n"
sHTML+=" cell.className='DPCell'\n"
sHTML+=" }\n"
sHTML+=" else\n"
sHTML+=" {\n"
sHTML+=" cell.className='DPCell';\n"
sHTML+=" }\n"
sHTML+=" cell.innerHTML=day;\n"
sHTML+=" cell.year=dt.getFullYear();\n"
sHTML+=" cell.month=dt.getMonth();\n"
sHTML+=" dt.setDate(day+1);\n"
sHTML+=" day=dt.getDate();\n"
sHTML+=" }\n"
sHTML+=" }\n"
sHTML+=" }\n"
sHTML+="};\n"
sHTML+="function dp_monthChange(lStep)\n"
sHTML+="{\n"
sHTML+=" var dt=BindingObject;\n"
sHTML+=" var odt=new Date(BindingObject.value);\n"
sHTML+=" var lOldMonth=odt.getMonth();\n"
sHTML+=" var lOldDay=odt.getDate();\n"
sHTML+=" dt.Day=1;\n"
sHTML+=" dt.Month=lOldMonth+lStep+1;\n"
sHTML+=" dt.Day=0;\n"
sHTML+=" var ndt=new Date(BindingObject.value);\n"
sHTML+=" if(ndt.getDate()>lOldDay)\n"
sHTML+=" dt.Day=lOldDay;\n"
sHTML+=" CurrentDate=new Date(BindingObject.value);\n"
sHTML+= " dp_initDropDown();\n"
sHTML+="};\n"
sHTML+="function dp_ddt_click()\n"
sHTML+="{"
sHTML+=" BindingObject.Year=event.srcElement.year;\n"
sHTML+=" BindingObject.Month=event.srcElement.month;\n"
sHTML+=" BindingObject.Day=event.srcElement.innerText;\n"
sHTML+="};\n"
sHTML+="<" + "/SCRIPT>\n"

Answer 14

sHTML+="<BODY scroll=no bottomMargin=0 topMargin=0 leftMargin=0 rightMargin=0 onkeydown='dp_showDataTable();'>\n"
sHTML+="<TABLE cellspacing=0 cellpadding=0 id=DateTable class=clock>\n"
sHTML+="<TR class=DPTitle>\n"
sHTML+="<TD align=center class=DPBtn style='padding-right:0;cursor:hand;' onclick='dp_monthChange(-1)' ondblclick='dp_monthChange(-1)' title=上月><<</TD>\n"
var dt=oDateObject.clone();
var wd=oDateObject.getDay();
dt=new Date(oDateObject.getFullYear(),oDateObject.getMonth(),1-wd);
sHTML+="<TD align=center colspan=5 class=DPCurrentMonth>" + dp_getMonthName(oDateObject.getMonth()) + " " + oDateObject.getFullYear() + "</TD>\n"
sHTML+="<TD align=center class=DPBtn style='cursor:hand;' onclick='dp_monthChange(1)' ondblclick='dp_monthChange(1)' title=下月>>></TD>\n"
sHTML+="</TR>\n"
sHTML+="<TR>\n"
sHTML+="<TD class=DPWeekName>日</TD><TD class=DPWeekName>一</TD><TD class=DPWeekName>二</TD>\n"
sHTML+="<TD class=DPWeekName>三</TD><TD class=DPWeekName>四</TD><TD class=DPWeekName>五</TD><TD class=DPWeekName>六</TD>\n"
sHTML+="</TR>\n"
var day=dt.getDate();
for(i=0;i<6;i++)
{
sHTML+="<TR>"
for(j=0;j<7;j++)
{
sColor="";
if(dt.getMonth()!=oDateObject.getMonth())
{
_className="DPCellOther"
}
else
{
if(dt.valueOf()==oDateObject.valueOf())
{
_className="DPCell"
}
else
{
_className="DPCell";
}
}
sHTML+="<TD onmouseover='dp_ddt_click()' ondblclick=\"dp_showDataTable()\" class=" + _className + " align=center year='" + dt.getFullYear() + "' month='" + dt.getMonth() + "'>" + day + "</TD>\n";
dt.setDate(day+1);
day=dt.getDate();
}
sHTML+="</TR>\n"
}
sHTML+="</TABLE>\n"
sHTML+="</BODY>\n"
sHTML+="<SCRIPT language=javascript>\n"
sHTML+="function InitIframe()\n"
sHTML+="{\n"
sHTML+=" if(parent.document.all('" + theName + "').height=='' && parent.document.all('" + theName + "').width=='')\n"
sHTML+=" {\n"
sHTML+=" parent.document.all('" + theName + "').height=parseInt(document.all.DateTable.scrollHeight)+5;\n"
sHTML+=" parent.document.all('" + theName + "').width=parseInt(document.all.DateTable.scrollWidth)+5;\n"
sHTML+=" }\n"
sHTML+="   parent.oDateIframe=parent.document.all('" + theName + "');\n"
sHTML+="};\n"
sHTML+="<" + "/SCRIPT>\n"
window.frames[theName].document.write(sHTML);
}

Answer 15

to  Debian(乌鱼子) 
好象不是写给跨浏览器的用户的.
在WEB应用程序设计中,是否考虑跨平台特性,取决于实际的应用环境.
而HTC在ie5.0以上对客户端对象的良好的封装性,让我选择了使用HTC来解决客户端代码的复用问题.

Answer 16

关于以上代码的演示你可以参考
www.mooey.com/datepicker/date_picker.htm
新版本的文件包括
date_picker.htm(演示文件)
DATE_PICKER.HTC(htc组件)
DatePicker.css(所有界面效果通过它定义)
arrowRight.gif(接下来的两个图片用于月份的滚动按钮.如果不希望有太多依赖,可以在htc文件中将<img>去掉,替换成文字)
arrowLeft.gif
所有文件放在同一个目录中
如果希望在共用目录中使用该htc,可以在htc中适当更改所有引用url为相对路径
下一个版本将解决文件依赖问题,所有特性通过htc的接口属性设置实现

Answer 17

to silverswords(笨笨虫冲)
年和月可以直接在输入框中输入的,因为年和月的下拉选择似乎没有必要.
日的处理也一样

Answer 18

这东西，每个人都写来写去的，我觉得没什么意思！
找点有难度的来写写吧！
我也写了个JSCalendar呢！给你参考参考！
http://www.cntomorrow.com:3310/?destUrl=GuestBookDetail.asp?id=274JerKii

Answer 19

上述代码早已经拜读.有感于大量的全局变量使用容易和程序中定义的代码互相冲突.所以才推出了这个htc版本的日历.
之前我们项目中所采用的便是这种使用全局变量的日历,结果在引用了另外一个具有类似功能的脚本之后出现莫名其妙的错误.经单步调试跟踪才发现是全局变量冲突

Answer 20

另外上述日历不具备事件回调功能也是WEB应用程序中的一大缺憾

Answer 21

使用HTC是可以实现事件回调功能，但是如果想要将他用到Netscape上的话，要改的东西就很多了！基本上要重写很多代码。因为htc只能用在IE中！我认为各有各的好处。全局变量如果使用得好的话，可更简化你的编程。：）JerKii

Answer 22

我的，没用htc，很简洁，才一百多行
http://www.sayee.com/cloudchen/js/myCalendar.htm

Answer 23

说一下我这个特点：日期上没有过多的判断，只取每月的天数，上月的最后一天。日历主题都由脚本构造，没有html代码（很简洁），外观全部由css控制，修改css样式就可以有多套面板。

Answer 24

cloudchen(陈系上),不错！颜色搭配很COOOOOOOL。