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);
}
*
* 顯示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='../../Script/ScriptDate.js' -->
<script language="javascript" type="text/javascript" src="../Script/ShowScriptDate.js"></script>
<input type="text" maxlength="10" size="15" id="BeginDate" οnclick="new ShowScriptDate(this)" />
3. 樣式模型