一般不会被列表框遮挡的日期控件都是用一个透明的iframe来做的，但在IE5下因为透明风格不被支持却无法正常使用。这个控件直接使用iframe作为日期选择界面，就解决了兼容性问题。不过只有简单的选择功能，如果大家给它添加了新的功能，记得告诉我一下
。我有时间也给它添点功能，比如设定可选择时间段、快捷选择年份和月份等等。
控件代码：
Imports System.ComponentModel
Imports System.Web.UI
![]()
如果页面中有多个日期控件，就需要给它们设定不同的FormName和IDName了。
DateControl.js文件内容：
document.write("<iframe id=DateControlSelect src=\"/js/DateControl.htm\" style=\"position:absolute; visibility:hidden;width:175px; height:182px; z-index:10; \" scrolling=no frameborder=0>")
var DateControlNowID = "";
function ShowDateControl()
{
if(event.srcElement.type == "button")
{
sTemp = event.srcElement.id.substr(0, event.srcElement.id.length - 6)
}
else if(event.srcElement.type == "text")
{
sTemp = event.srcElement.id.substr(0, event.srcElement.id.length - 5)
}
document.all.DateControlSelect.style.left = event.x
document.all.DateControlSelect.style.top = event.y
if(DateControlNowID == sTemp)
{
if(document.all.DateControlSelect.style.visibility == "hidden")
{
document.all.DateControlSelect.style.visibility = "visible"
}
else
{
document.all.DateControlSelect.style.visibility = "hidden"
}
}
else
{
document.all.DateControlSelect.style.visibility = "visible"
DateControlNowID = sTemp
}
}
function FillDateControl(iMonth)
{
inputObject = eval("document.all." + DateControlNowID + "Input")
if(DateControlTableHead.rows[0].cells[1].innerText == "")
{
dt = new Date()
}
else
{
stemp = DateControlTableHead.rows[0].cells[1].innerText
dt = new Date(parseInt(stemp.substring(0, stemp.indexOf("-"))), parseInt(stemp.substring(stemp.indexOf("-") + 1, stemp.length)) - 1 + iMonth, 1)
}
DateControlTableHead.rows[0].cells[1].innerText = dt.getYear() + "-" + (dt.getMonth() + 1)
dtStart = new Date(dt.getFullYear(), dt.getMonth(), 1)
dtNext = new Date(dt.getFullYear(), dt.getMonth() + 1, 1)
iStartDay = dtStart.getDay()
i = 0
j = 1
for(; i < 7*6; i++)
{
if((i % 7) == 0 && i != 0)
{
j++
}
DateControlTableContent.rows[j].cells[i % 7].innerText = ""
DateControlTableContent.rows[j].cells[i % 7].bgColor = "white"
}
i = 0
iDay = 1
j = 1
iDayCount = (dtNext - dtStart) / 24 / 60 / 60 / 1000
dtNow = new Date()
for(; i<iDayCount; i++)
{
iDay = i + iStartDay + 6
if((iDay % 7) == 0 && iDay != 1)
{
if(i != 0 || iStartDay != 1)
{
j++
}
}
stemp = dt.getFullYear() + "-" + (dt.getMonth()+1).toString() + "-" + (i + 1).toString()
DateControlTableContent.rows[j].cells[iDay % 7].innerHTML = "<a href='javascript:top.ChangeDayDateControl(\"" + stemp + "\");' >" + (i + 1).toString() + "</a>"
if(inputObject)
{
if(stemp == inputObject.value || (inputObject.value == "" && (i + 1) == dtNow.getDate() && dtNow.getMonth() == dt.getMonth() && dtNow.getFullYear() == dt.getFullYear()))
{
DateControlTableContent.rows[j].cells[iDay % 7].bgColor = "red"
}
}
else
{
if(((i + 1) == dtNow.getDate() && dtNow.getMonth() == dt.getMonth() && dtNow.getFullYear() == dt.getFullYear()))
{
DateControlTableContent.rows[j].cells[iDay % 7].bgColor = "red"
}
}
}
}
function ChangeDayDateControl(sTemp)
{
eval("document.all." + DateControlNowID + "Input.value = sTemp")
FillDateControl(0)
document.all.DateControlSelect.style.visibility = "hidden"
}
DateControl.htm文件内容：
<body leftmargin=0 topmargin=0>
<table id=DateControlTableHead width=200 style="color: #FFFFFF;background-color: #cc0033;height: 15px;width: 175px;border-top-width: 1px;border-right-width: 0px;border-bottom-width: 1px;border-left-width: 0px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;">
<tr>
<td><a href="javascript:parent.FillDateControl(-1);">上一月</a></td>
<td colspan=5 align=center></td>
<td align=right><a href="javascript:parent.FillDateControl(1);">下一月</a></td>
</tr>
</table>
<table id=DateControlTableContent style="background-color: #c2c2c2;height: 90px;width: 175px;">
<tr bgcolor="#FFCC66">
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td><font color=red>六</font></td>
<td><font color=red>日</font></td>
</tr>
<tr><td bgcolor="#c2c2c2"></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>
![]()
>
js,htm文件都要放在站点根目录下的js目录中。
控件界面还有些粗糙。
另外还有个Bug：定位上如果滚动条没在开始位置，日期控件就不能显示在预定位置了。如果有朋友能帮忙改进的话，非常感谢。