一个简单的日期选择框(支持IE,FF,Opera)

把图片下载，然后把jpg后缀名改为.rar即是全部源文件

截图：

调用页面：text.html

<html>
<head>
<title>日期选择框</title>
<script type="text/JavaScript" src="dtp/dtp.js"></script>
</head>
<body>
<input type="text" name="df" id="df"  onClick="dtpDate('df')"/>
<body>
</html>

 dtp.js

 

var dtpInter;
var dtpFolder = window.parent.dtpFolder;
var dtpMonthName = window.parent.dtpMonthName;
var dtpHourList = window.parent.dtpHourList;
var dtpMinuteList = window.parent.dtpMinuteList;
var dtpStartYear,dtpStartHour,dtpStartMinute;

function dtpGetElement(n)...{
    return document.getElementById(n);
}
function dtpSpanOver(td, eImg, destImg)...{
    td.style.borderColor = '#88AAFF';
    dtpSwapImg(eImg, destImg);
}
function dtpSpanOut(td, eImg, destImg)...{
    td.style.borderColor = '#3366FF';
    dtpSwapImg(eImg, destImg);
}
function dtpSwapImg(eImg, destImg)...{
    var e = dtpGetElement(eImg);
    e.setAttribute('src', parent.dtpFolder + destImg);
}
function dtpCloseMenu()...{
    dtpGetElement('dtpDropMenu').style.visibility = 'hidden';
}
function dtpOpenMenu(e, text)...{
    var div = dtpGetElement('dtpDropMenu');
    var pos = window.parent.dtpAbsPos(e);
    div.innerHTML = text;
    div.style.left = pos.x;
    div.style.top = pos.y + 20;
    div.style.visibility = 'visible';
}
function dtpSetYear(y)...{
    y = y.replace(/<b>/gi,'');
    y = y.replace(/</b>/gi,'');
    y = y.replace(/&nbsp;/gi,'');
    y = y.replace(/ /gi,'');
    var n = parseInt(y);
    window.parent.dtpYear = n;
    dtpGetElement('dtpTxtYear').innerHTML = n;
    dtpCloseMenu();
    
    var html = window.parent.dtpCalendar();
    dtpGetElement('dtpCalendar').innerHTML = html;
}
function dtpSetPreMonth()...{
    var n = window.parent.dtpMonth;
    if(n < 1) n = 1;
    dtpSetMonth(n - 1);
}
function dtpSetNextMonth()...{
    var n = window.parent.dtpMonth;
    if(n > 10) n = 10;
    dtpSetMonth(n + 1);
}
function dtpSetMonth(n)...{
    dtpCloseMenu();
    window.parent.dtpMonth = n;
    var html = window.parent.dtpCalendar();
    dtpGetElement('dtpTxtMonth').innerHTML = dtpMonthName[n];
    dtpGetElement('dtpCalendar').innerHTML = html;
}
function dtpSetDate(date)...{
    window.parent.dtpSetDate(date);
}
function dtpMonth(e)...{
    var n = window.parent.dtpMonth;
    var _html = '<table cellpadding="0" cellspacing="0" border="0"><tr><td>';
    for(i=0; i<6; i++)...{
        _html += '<div id="'+ i +'" class="dtpPopItem"'+
        ' onClick="dtpSetMonth('+ i +')"'+
        ' onMouseOver="this.style.backgroundColor='#FFCC99'"'+
        ' onMouseOut="this.style.backgroundColor=''">&nbsp; ';
        if(i == n)...{
            _html += '<b>'+ dtpMonthName[i] +'</b>';
        }else...{
            _html += dtpMonthName[i];
        }
        _html += ' &nbsp;</div>';
    }
    _html += '</td><td style="border-left:1px solid #a0a0a0;">';
    for(i=6; i<12; i++)...{
        _html += '<div id="'+ i +'" class="dtpPopItem"'+
        ' onClick="dtpSetMonth('+ i +')"'+
        ' onMouseOver="this.style.backgroundColor='#FFCC99'"'+
        ' onMouseOut="this.style.backgroundColor=''">&nbsp; ';
        if(i == n)...{
            _html += '<b>'+ dtpMonthName[i] +'</b>';
        }else...{
            _html += dtpMonthName[i];
        }
        _html += ' &nbsp;</div>';
    }
    _html += '</td></tr></table>';
    dtpOpenMenu(e, _html);
}
function dtpYear(e)...{
    var _html = '<div class="dtpPopItem" onMouseDown="clearInterval(dtpInter); dtpInter=setInterval('dtpAscYear()',80)"'+
    ' onMouseOver="this.style.backgroundColor='#FFCC99'"'+
    ' onMouseUp="clearInterval(dtpInter)"'+
    ' onMouseOut="this.style.backgroundColor=''" align="center">&nbsp; — &nbsp;</div>';
    
    var n = window.parent.dtpYear;
    for(i=0; i<5; i++)...{
        var NowYear = n - 2 + i;
        _html += '<div id="dtpY'+ i +'" class="dtpPopItem"'+
        ' onClick="dtpSetYear(this.innerHTML)"'+
        ' onMouseOver="this.style.backgroundColor='#FFCC99'"'+
        ' onMouseOut="this.style.backgroundColor=''">&nbsp; ';
        if(NowYear == n)...{
            _html += '<b>'+ NowYear +'</b>';
        }else...{
            _html += NowYear;
        }
        _html += ' &nbsp;</div>';
    }
    _html += '<div class="dtpPopItem" onMouseDown="clearInterval(dtpInter); dtpInter=setInterval('dtpDescYear()',80)"'+
    ' onMouseOver="this.style.backgroundColor='#FFCC99'"'+
    ' onMouseUp="clearInterval(dtpInter)"'+
    ' onMouseOut="this.style.backgroundColor=''" align="center">&nbsp; + &nbsp;</div>';
    
    dtpOpenMenu(e, _html);
    dtpStartYear = n - 2;
}
function dtpAscYear()...{
    var _html = '';
    var n = window.parent.dtpYear;
    var y = dtpStartYear;
    for(i=0; i<5; i++)...{
        var NowYear = y - 1 + i;
        if(NowYear == n)...{
            _html = '&nbsp; <b>'+ NowYear +'</b> &nbsp;';
        }else...{
            _html = '&nbsp; '+ NowYear +' &nbsp;';
        }
        dtpGetElement('dtpY'+ i).innerHTML = _html;
    }
    dtpStartYear--;
}
function dtpDescYear()...{
    var _html = '';
    var n = window.parent.dtpYear;
    var y = dtpStartYear;
    for(i=0; i<5; i++)...{
        var NowYear = y + 1 + i;
        if(NowYear == n)...{
            _html = '&nbsp; <b>'+ NowYear +'</b> &nbsp;';
        }else...{
            _html = '&nbsp; '+ NowYear +' &nbsp;';
        }
        dtpGetElement('dtpY'+ i).innerHTML = _html;
    }
    dtpStartYear++;
}

default.css

 

body{...}{
    margin:1px 1px 1px 1px;
    background:#FFFFFF;
}
.dtpCaption{...}{
    border:1px solid #3366FF;
    white-space:nowrap;
    font-weight:bold;
    font-size:12px;
    color:#FFFFFF;
    cursor:pointer;
}
.dtpPopItem{...}{
    font-size:12px;
    padding:1px;
    cursor:pointer;
}
#dtpDropMenu
{...}{
    font-size:12px;
    border:1px solid #a0a0a0;
    background-color:#FFFFDD;
}