Web頁實現Winform中的日歷控件

1. ShowScriptDate.js

/**//********************************************
 *
 * 顯示Javascript日期顯示框對象
 * 作者：limin_he(limin_he@maxnse.com)
 * 日期：2006-11-02
 *
 ********************************************/

//顯示日期控件對話框對象
function ShowScriptDate(inputCtrl)
...{
    this.input = inputCtrl;                        //文本框對象
    this.panel = null;                            //當前對象
    
    this.Load();
    
}
//初使化
ShowScriptDate.prototype.Init = function()
...{
    var div = document.createElement("DIV");
    div.style.border = "solid 1px #000000";
    div.style.width = "200px";
    div.style.position = "absolute";
    div.style.left = OffsetX(this.input).toString() + "px";
    div.style.top = (OffsetY(this.input) + this.input.offsetHeight).toString() + "px";
    this.panel = div;
    document.body.appendChild(div);
    
    function OffsetX(oElement) 
    ...{ 
        var x=0;
        var el=oElement; 
        while(el)
        ...{
            x += el.offsetLeft;
            el=el.offsetParent; 
        } 
        return x;
    } 
    function OffsetY(oElement) 
    ...{ 
        var y=0; 
        var el=oElement; 
        while(el)
        ...{
            y += el.offsetTop;
            el=el.offsetParent; 
        } 
        return y;
    } 
    
}
//加載
ShowScriptDate.prototype.Load = function()
...{
    this.Init();
    this.CreateChildControls();
}
//創建日期控件
ShowScriptDate.prototype.CreateChildControls = function()
...{
    var sender = this;
    
    var date = new ScriptDate(this.panel);
    date.onClick = GetDate;
    date.Load();
    
    function GetDate(dateCtrl,date)
    ...{
        sender.input.value = date.getFullYear().toString() + "/" + (date.getMonth()+1).toString() + "/" + date.getDate().toString();
        sender.Dispose();
    }
}
//釋放對象
ShowScriptDate.prototype.Dispose = function()
...{
    if(this.panel!=null) document.body.removeChild(this.panel);    
}

 2. 調用方法

//引入日期對象，詳見：http://blog.csdn.net/helimin19/archive/2006/11/10/1377523.aspx
<!-- #include file='http://www.cnblogs.com/Script/ScriptDate.js' -->
<script language="javascript" type="text/javascript" src="../Script/ShowScriptDate.js"></script>
<input type="text" maxlength="10" size="15" id="BeginDate" onclick="new ShowScriptDate(this)" />

3. 樣式模型