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

最新推荐文章于 2025-06-14 11:54:15 发布

lanxe

最新推荐文章于 2025-06-14 11:54:15 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： opera ie html border class date

本文链接：https://blog.youkuaiyun.com/lanxe/article/details/1037568

本文介绍了一个简单的日期选择器实现方案，包括HTML结构定义、JavaScript交互逻辑及CSS样式配置。通过调用特定函数，用户可以轻松地选取日期，并通过下拉菜单选择年份和月份。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

截图：

调用页面：text.html

<html>

<head>

<title>日期选择框</title>

</head>

<body>

<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(/ /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=''">  ';

if(i == n){

_html += '<b>'+ dtpMonthName[i] +'</b>';

}else{

_html += dtpMonthName[i];

}

_html += '  </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=''">  ';

if(i == n){

_html += '<b>'+ dtpMonthName[i] +'</b>';

}else{

_html += dtpMonthName[i];

}

_html += '  </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">  —  </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=''">  ';

if(NowYear == n){

_html += '<b>'+ NowYear +'</b>';

}else{

_html += NowYear;

}

_html += '  </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">  +  </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 = '  <b>'+ NowYear +'</b>  ';

}else{

_html = '  '+ NowYear +'  ';

}

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 = '  <b>'+ NowYear +'</b>  ';

}else{

_html = '  '+ NowYear +'  ';

}

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;

}