一个简单的日期选择框(支持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;
}