IE5下通过、不会被列表框遮挡的日期控件

一般不会被列表框遮挡的日期控件都是用一个透明的iframe来做的，但在IE5下因为透明风格不被支持却无法正常使用。这个控件直接使用iframe作为日期选择界面，就解决了兼容性问题。不过只有简单的选择功能，如果大家给它添加了新的功能，记得告诉我一下。我有时间也给它添点功能，比如设定可选择时间段、快捷选择年份和月份等等。
控件代码：

Imports System.ComponentModel
Imports System.Web.UI

<DefaultProperty("Text"), ToolboxData("<{0}:DateControl runat=server></{0}:DateControl>")> Public Class DateControl
    Inherits System.Web.UI.WebControls.WebControl

    Dim content As String = "<INPUT class=""INPUTCLASS"" onclick=""ShowDateControl()"" type=""text"" size=""12"" name=""FormName"" id=""IDNameInput"" value=""IDTEXT"" readonly=true>" & vbCrLf & _
            "<INPUT class=""BUTTONCLASS"" onclick=""ShowDateControl()"" type=""button"" value=""输入"" id=""IDNameButton"">" & vbCrLf

    Dim _text As String
    Dim _classInput As String
    Dim _classButton As String
    Dim _name As String = "StartDate"
    Dim _id As String = "DCControl"

    '日期初始值
    <Category("Appearance"), DefaultValue("")> Property [Text]() As String
        Get
            Return _text
        End Get
        Set(ByVal Value As String)
            _text = Value
        End Set
    End Property

    '输入框的css
    <Category("Appearance"), DefaultValue("")> Property ClassInput() As String
        Get
            Return _classInput
        End Get
        Set(ByVal Value As String)
            _classInput = Value
        End Set
    End Property

    '按钮的css
    <Category("Appearance"), DefaultValue("")> Property ClassButton() As String
        Get
            Return _classButton
        End Get
        Set(ByVal Value As String)
            _classButton = Value
        End Set
    End Property

    '输入框的name属性
    <Category("Design"), DefaultValue("StartDate")> Property FormName() As String
        Get
            Return _name
        End Get
        Set(ByVal Value As String)
            _name = Value
        End Set
    End Property

    '控件的ID
    <Category("Design"), DefaultValue("DCControl")> Property IDName() As String
        Get
            Return _id
        End Get
        Set(ByVal Value As String)
            _id = Value
        End Set
    End Property

    Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter)
        content = content.Replace("IDName", IDName)
        content = content.Replace("FormName", FormName)
        content = content.Replace("IDTEXT", Text)
        content = content.Replace("INPUTCLASS", ClassInput)
        content = content.Replace("BUTTONCLASS", ClassButton)
        output.Write(content)
    End Sub

    Private Sub DateControl_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Page.RegisterStartupScript("DateControl", "<script language='javascript' src=/js/DateControl.js></script>")
    End Sub
End Class


如果页面中有多个日期控件，就需要给它们设定不同的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>
<script language="javascript">
parent.DateControlTableHead = document.all.DateControlTableHead
parent.DateControlTableContent = document.all.DateControlTableContent
parent.FillDateControl()
</script>


js,htm文件都要放在站点根目录下的js目录中。
控件界面还有些粗糙。
另外还有个Bug：定位上如果滚动条没在开始位置，日期控件就不能显示在预定位置了。如果有朋友能帮忙改进的话，非常感谢。

posted @ 2004-10-12 12:31  squirrel_sc  阅读(2287)  评论(1)  编辑  收藏  举报