//日历事件处理开始//
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(oDateTable.style.display=="block")
{
if((event.srcElement.tagName=="TD"
&&(event.srcElement.className=='DPCell'||event.srcElement.className=='DPCellOther'))
||event.srcElement.tagName=="A")
{
oDateTable.style.display="none";
}
}
else if(oDateTable.style.display=="none")
{
if(event.srcElement.tagName=="A")
{
oDateTable.style.left=getOffsetLeft(this)+parseInt(this.offsetWidth/2);
oDateTable.style.top=getOffsetTop(this)+this.offsetHeight+10;
}
oDateTable.style.display="block";
}
}
//共用函数结束

解决方案 »

  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);
    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()'));
    oDatePicker.appendChild(oDateSelect);
    oDateTable=this.document.createElement("div");
    oDateTable=oDatePicker.appendChild(oDateTable);
    oDateTable.style.position="absolute";
    oDateTable.style.display="none";
    oDateIframe=element.document.createElement("iframe");
    oDateIframe=oDateTable.appendChild(oDateIframe);
    theName=oDateIframe.uniqueID;
    sHTML="<iframe frameBorder=0 width=" + (cl_dpCellWidth * 7 + 2) + " height=" + (cl_dpRowHeight * 8 + 4);
    sHTML+=" marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no";
    sHTML+=" name=" + theName +" src='about:blank'></iframe>";
    oDateIframe.outerHTML=sHTML;
      

  2.   

    sHTML="<link rel=stylesheet type='text/css' href='DatePicker.css'>"
    sHTML+="<SCRIPT language=javascript>"
    sHTML+="var BindingObject=parent.document.all('" + element.uniqueID +"');"
    sHTML+="var oDateTable=parent.document.all('" + oDateTable.uniqueID +"');"
    sHTML+="var CurrentDate=new Date(BindingObject.value);"
    sHTML+="var curCell=null;"
    sHTML+="function InitIframe()"
    sHTML+="{"
    sHTML+=" {"
    sHTML+=" parent.document.all('" + theName + "').height=parseInt(document.body.scrollHeight)+5;"
    sHTML+=" parent.document.all('" + theName + "').width=parseInt(document.body.scrollWidth)+5;"
    sHTML+=" }"
    sHTML+="};"
    sHTML+=dp_getMonthName.toString() + ";";
    sHTML+=dp_showDataTable.toString() + ";";
    sHTML+="function dp_initDropDown()"
    sHTML+="{"
    sHTML+=" var ddt=document.all.DateTable;"
    sHTML+=" var cell=null;"
    sHTML+=" var dt=new Date(CurrentDate.getFullYear(),CurrentDate.getMonth(),1);"
    sHTML+=" cell=ddt.rows[0].cells[1];"
    sHTML+=" if(cell)"
    sHTML+=" {"
    sHTML+=" cell.innerText=dp_getMonthName(dt.getMonth())+' '+dt.getFullYear();"
    sHTML+=" }"
    sHTML+=" var wd=dt.getDay();"
    sHTML+=" dt=new Date(dt.getFullYear(),dt.getMonth(),1-wd);"
    sHTML+=" var day=dt.getDate();"
    sHTML+=" for(var i=2; i<8; i++)"
    sHTML+=" {"
    sHTML+=" for(var j=0; j<7; j++)"
    sHTML+=" {"
    sHTML+=" cell=ddt.rows[i].cells[j];"
    sHTML+=" if(cell)"
    sHTML+=" {"
    sHTML+=" if(dt.getMonth()!=CurrentDate.getMonth())"
    sHTML+=" {"
    sHTML+=" _className='DPCellOther'"
    sHTML+=" }"
    sHTML+=" else"
    sHTML+=" {"
    sHTML+=" _className='DPCell'"
    sHTML+=" }"
    sHTML+=" cell.className=_className;"
    sHTML+=" if(dt.valueOf()==CurrentDate.valueOf())"
    sHTML+=" {"
    sHTML+=" sHTML='<fieldset style=background-color:7777e8;cursor:hand;font-weight:800>' + day + '<fieldset>';"
    sHTML+=" }"
    sHTML+=" else"
    sHTML+=" {"
    sHTML+=" sHTML=day;"
    sHTML+=" }"
    sHTML+=" cell.innerHTML=sHTML;"
    sHTML+=" cell.year=dt.getFullYear();"
    sHTML+=" cell.month=dt.getMonth();"
    sHTML+=" dt.setDate(day+1);"
    sHTML+=" day=dt.getDate();"
    sHTML+=" }"
    sHTML+=" }"
    sHTML+=" }"
    sHTML+="};"
    sHTML+="function dp_monthChange(lStep)"
    sHTML+="{"
    sHTML+=" var dt=BindingObject;"
    sHTML+=" var odt=new Date(BindingObject.value);"
    sHTML+=" var lOldMonth=odt.getMonth();"
    sHTML+=" var lOldDay=odt.getDate();"
    sHTML+=" dt.Day=1;"
    sHTML+=" dt.Month=lOldMonth+lStep+1;"
    sHTML+=" dt.Day=0;"
    sHTML+=" var ndt=new Date(BindingObject.value);"
    sHTML+=" if(ndt.getDate()>lOldDay)"
    sHTML+=" dt.Day=lOldDay;"
    sHTML+=" CurrentDate=new Date(BindingObject.value);"
    sHTML+= " dp_initDropDown();"
    sHTML+="};"
    sHTML+="function dp_ddt_click()"
    sHTML+="{"
    sHTML+=" BindingObject.Year=event.srcElement.year;"
    sHTML+=" BindingObject.Month=event.srcElement.Month;"
    sHTML+=" BindingObject.Day=event.srcElement.innerText;"
    sHTML+=" dp_showDataTable();"
    sHTML+="};"
    sHTML+="function dp_ddt_dblclick()"
    sHTML+="{"
    sHTML+=" dp_showDataTable();"
    sHTML+="};"
    sHTML+="<" + "/SCRIPT>"
    sHTML+="<BODY scroll=no bgcolor='' bottomMargin=0 topMargin=0 leftMargin=0 rightMargin=0>"
    sHTML+="<FIELDSET style='border-color:red;border-style:inset'>"
    sHTML+="<TABLE style='table-layout:fixed' cellspacing=0 cellpadding=0 id=DateTable class=clock onclick=dp_ddt_click() ondblclick=dp_ddt_dblclick()>"
    for(i=0;i<7;i++)
    {
    sHTML+="<COL width=" + (cl_dpCellWidth-2) + ">"
    }
    sHTML+="<TR class=DPTitle height=" + cl_dpRowHeight + ">"
    sHTML+="<TD align=center class=DPBtn style='padding-right:0;cursor:hand;' onclick=dp_monthChange(-1) title=上月>《</TD>"
    var dt=oDateObject.clone();
    var wd=dt.getDay();
    dt=new Date(dt.getFullYear(),dt.getMonth(),1-wd);
    sHTML+="<TD align=center colspan=5>" + dp_getMonthName(oDateObject.getMonth()) + " " + oDateObject.getFullYear() + "</TD>"
    sHTML+="<TD align=center class=DPBtn style='cursor:hand;' onclick=dp_monthChange(1) title=下月>》</TD>"
    sHTML+="</TR>"
    sHTML+="<TR height=" + (cl_dpRowHeight) + ">"
    sHTML+="<TD class=DPWeekName>日</TD>"
    sHTML+="<TD class=DPWeekName>一</TD>"
    sHTML+="<TD class=DPWeekName>二</TD>"
    sHTML+="<TD class=DPWeekName>三</TD>"
    sHTML+="<TD class=DPWeekName>四</TD>"
    sHTML+="<TD class=DPWeekName>五</TD>"
    sHTML+="<TD class=DPWeekName>六</TD>"
    sHTML+="</TR>"
    var day=dt.getDate();
    for(i=0;i<6;i++)
    {
    sHTML+="<TR height=" + cl_dpRowHeight + ">"
    for(j=0;j<7;j++)
    {
    sColor="";
    if(dt.getMonth()!=oDateObject.getMonth())
    {
    _className="DPCellOther"
    }
    else
    {
    _className="DPCell";
    }
    sHTML+="<TD class=" + _className + sColor + " align=center year='" + dt.getFullYear() + "' month='" + dt.getMonth() + "'>"
    if(dt.valueOf()==oDateObject.valueOf())
    {
    sHTML+="<fieldset style='background-color:7777e8;cursor:hand;font-weight:800'>" + day + "</fieldset>";
    }
    else
    {
    sHTML+=day;
    }
    sHTML+="</TD>";
    dt.setDate(day+1);
    day=dt.getDate();
    }
    sHTML+="</TR>"
    }
    sHTML+="</TABLE>"
    sHTML+="</FIELDSET>"
    sHTML+="</BODY>"
    window.frames[theName].document.write(sHTML);
    }
    </SCRIPT>
    </PUBLIC:COMPONENT>
      

  3.   

    测试页
    <STYLE>
       .DatePicker {behavior:url(DATE_PICKER.HTC)} 
    </STYLE>
    <table border=1>
    <tr>
    <td>
    <INPUT id=xx class="DatePicker" type=text DateValue="1999/09/09" ondatechange="//alert('value chaged')">
    </td>
    <td>
    <INPUT id=xx class="DatePicker " type=hidden DateValue="1999/09/09" ondatechange="//alert('value chaged')">
    </td>
    </tr>
    </table>
    <iframe name=test src="about:blank" height=100 widht=200></iframe>
      

  4.   

    为了挣几个血汗分.偶只好两个马甲轮着上了.  :<<<A.button
    {
        COLOR: black;
        FONT-FAMILY: ??ì?;
        FONT-SIZE: 11px;
        FONT-WEIGHT: bold
    }
    A.button:hover
    {
        COLOR: orangered;
        TEXT-DECORATION: none
    }
    A.button:visited
    {
        COLOR: royalblue;
        TEXT-DECORATION: none
    }
    BODY
    {
        BACKGROUND-IMAGE: url(../images/main_bg.jpg);
        BACKGROUND-REPEAT: repeat;
        FONT-FAMILY: ??¨??;
        FONT-SIZE: 12px
    }
    A
    {
        COLOR: royalblue;
        FONT-WEIGHT: bold;
        TEXT-DECORATION: none
    }
    A:hover
    {
        COLOR: chocolate;
        FONT-WEIGHT: bold;
        TEXT-DECORATION: underline
    }
    A:visited
    {
        COLOR: royalblue
    }
    SELECT
    {
        FONT-FAMILY: ??¨??, Verdana, Tahoma, Arial, Geneva;
        FONT-SIZE: 12px;
        font-color: black
    }
    TEXTAREA
    {
        FONT-FAMILY: ??¨??, Verdana, Tahoma, Arial, Geneva;
        FONT-SIZE: 12px;
        font-color: black
    }
    INPUT
    {
        FONT-FAMILY: ??¨??, Verdana, Tahoma, Arial, Geneva;
        FONT-SIZE: 12px;
        font-color: black
    }
    TD
    {
        FONT-FAMILY: ??¨??, Verdana, Tahoma, Arial, Geneva;
        FONT-SIZE: 12px;
        font-color: black
    }
    TR
    {
        BORDER-BOTTOM: mediumaquamarine;
        BORDER-LEFT: mediumaquamarine;
        BORDER-RIGHT: mediumaquamarine;
        BORDER-TOP: mediumaquamarine;
        COLOR: black;
        FONT-FAMILY: ??¨??, Verdana, Tahoma, Arial, Geneva;
        FONT-SIZE: 12px;
        font-color: black
    }
    TH
    {
        COLOR: black;
        FONT-FAMILY: ??¨??;
        FONT-SIZE: 13px;
        HEIGHT: 16px;
        font-color: #003466
    }
    BUTTON
    {
        BACKGROUND-COLOR: lightblue;
        COLOR: midnightblue
    }
    CODE
    {
        FONT-FAMILY: ??¨??, Verdana, Tahoma, Arial, Geneva;
        FONT-SIZE: 12px;
        FONT-WEIGHT: bold;
        font-color: black
    }
    A:active
    {
        COLOR: royalblue
    }
    TABLE
    {
        FONT-SIZE: 12pt;
        MARGIN-BOTTOM: 0px;
        MARGIN-LEFT: 0px;
        MARGIN-RIGHT: 0px;
        PADDING-BOTTOM: 0px;
        PADDING-LEFT: 0px;
        PADDING-RIGHT: 0px;
        PADDING-TOP: 0px
    }
    TR.title
    {
        BACKGROUND-COLOR: #97b6ff;
        COLOR: white;
        FONT-WEIGHT: bolder;
        HEIGHT: 14pt;
        TEXT-ALIGN: left
    }
    TD.conntent
    {
        COLOR: #006f6f
    }
    TD.caption
    {
        BACKGROUND-COLOR: lavender;
        COLOR: black;
        FONT-WEIGHT: bolder;
        TEXT-ALIGN: left
    }
    HTML
    {
        BACKGROUND-COLOR: transparent;
        FONT-SIZE: 9pt;
        FONT-STYLE: normal;
        FONT-VARIANT: normal;
        FONT-WEIGHT: normal;
        LINE-HEIGHT: normal;
        WIDTH: 200px
    }
    #dpDropDownTable
    {
        BACKGROUND-COLOR: #ffffff;
        BORDER-BOTTOM: 1px solid;
        BORDER-LEFT: 1px solid;
        BORDER-RIGHT: 1px solid;
        BORDER-TOP: 1px solid;
        CURSOR: default;
        DISPLAY: none;
        POSITION: absolute
    }
    .DPTitle
    {
        BACKGROUND-COLOR: #c9f1f1;
        COLOR: #000000;
        FONT-SIZE: 9pt;
        FONT-STYLE: normal;
        FONT-VARIANT: normal;
        FONT-WEIGHT: normal;
        LINE-HEIGHT: normal;
        TEXT-ALIGN: center
    }
    .DPWeekName
    {
        BORDER-BOTTOM: black 1px solid;
        COLOR: #00008b;
        FONT-SIZE: 9pt;
        FONT-STYLE: normal;
        FONT-VARIANT: normal;
        FONT-WEIGHT: normal;
        LINE-HEIGHT: normal;
        TEXT-ALIGN: center
    }
    .DPCellOther
    {
        COLOR: silver;
        CURSOR: hand;
        FONT-SIZE: 9pt;
        FONT-STYLE: normal;
        FONT-VARIANT: normal;
        FONT-WEIGHT: normal;
        LINE-HEIGHT: normal;
        TEXT-ALIGN: center;
        WIDTH: 10pt
    }
    .DPCell
    {
        COLOR: #00008b;
        CURSOR: hand;
        FONT-SIZE: 9pt;
        FONT-STYLE: normal;
        FONT-VARIANT: normal;
        FONT-WEIGHT: normal;
        LINE-HEIGHT: normal;
        TEXT-ALIGN: center;
        WIDTH: 20pt
    }
    .DPCellSelect
    {
        BACKGROUND-COLOR: #ffa07a;
        COLOR: #000000;
        CURSOR: hand;
        FONT-SIZE: 9pt;
        FONT-STYLE: normal;
        FONT-VARIANT: normal;
        FONT-WEIGHT: normal;
        LINE-HEIGHT: normal;
        TEXT-ALIGN: center;
        WIDTH: 10pt
    }
    .DPYear
    {
        BACKGROUND-COLOR: transparent;
        BORDER-BOTTOM: 1px;
        BORDER-LEFT: 1px;
        BORDER-RIGHT: 1px;
        BORDER-TOP: 1px;
        COLOR: blue;
        FONT-SIZE: 9pt;
        FONT-STYLE: normal;
        FONT-VARIANT: normal;
        FONT-WEIGHT: normal;
        LINE-HEIGHT: normal;
        TEXT-ALIGN: right
    }
    .DPYearDes
    {
        BACKGROUND-COLOR: transparent
    }
    .DPMonth
    {
        BACKGROUND-COLOR: transparent;
        BORDER-BOTTOM: 0px;
        BORDER-LEFT: 0px;
        BORDER-RIGHT: 0px;
        BORDER-TOP: 0px;
        COLOR: blue;
        FONT-SIZE: 9pt;
        FONT-STYLE: normal;
        FONT-VARIANT: normal;
        FONT-WEIGHT: normal;
        LINE-HEIGHT: normal;
        TEXT-ALIGN: right
    }
    .DPMonthDes
    {
        BACKGROUND-COLOR: transparent;
        WIDTH: 10pt
    }
    .DPDay
    {
        BACKGROUND-COLOR: transparent;
        BORDER-BOTTOM: 0px;
        BORDER-LEFT: 0px;
        BORDER-RIGHT: 0px;
        BORDER-TOP: 0px;
        COLOR: blue;
        FONT-SIZE: 9pt;
        FONT-STYLE: normal;
        FONT-VARIANT: normal;
        FONT-WEIGHT: normal;
        LINE-HEIGHT: normal;
        TEXT-ALIGN: right
    }
    .DPDayDes
    {
        BACKGROUND-COLOR: transparent;
        WIDTH: 10pt
    }
    .DPSep
    {
        BACKGROUND-COLOR: transparent;
        WIDTH: 10px
    }
    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
    {
        BACKGROUND-COLOR: lightblue;
        BORDER-BOTTOM: salmon 1px solid;
        BORDER-LEFT: medium none;
        BORDER-TOP: white 1px solid;
        COLOR: black;
        FONT-SIZE: 9pt;
        FONT-STYLE: normal;
        FONT-VARIANT: normal;
        FONT-WEIGHT: normal;
        LINE-HEIGHT: normal;
        WIDTH: 36px
    }
    TABLE
    {
        WIDTH: 240pt
    }
    TD.head
    {
        COLOR: black;
        FONT-WEIGHT: bolder
    }
      

  5.   

    还是 htc 方便...... 可惜只有 IE 支持?
      

  6.   

    to runmin(拒用GOOGLE中...) 
    这个我也发现了.
    不过我在win98下的ie5 用起来感觉还挺好.不知道是什么原因,在win2K+ie6反而不爽了.你要是有兴趣,找到优化的方法不妨讨论一下