两种js的日期控件！一个精确到秒！

最新推荐文章于 2025-06-08 10:50:56 发布

原创最新推荐文章于 2025-06-08 10:50:56 发布 · 5.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#date #output #function #border #object #日历

本文介绍了一种网页上的日期选择器实现方式，包括了两种不同的示例代码，一种使用表格形式展示日期，另一种则提供了更丰富的日期选择界面，如年份、月份的选择，并详细展示了如何通过JavaScript控制日期范围及样式。

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

1.例子：开始时间：结束时间：

<html>

<head>

.TrTitle{

background:#D4D0C8;

height:20;

border-bottom:5px solid #D4D0C8;

color:#000; cursor: hand;

}

.TrOver{

background:#808080;

height:18;

border:0px solid #999999;

color:#D4D0C8; cursor: hand;

}

.TdOver{

background:#ffffff;

height:18;width:22px;

border:0px solid #cccccc;

color:#000;cursor: hand;

}

.TdOut{

background:#C6D3EF;

height:16;width:20px;

border:1px solid #3169C6;

color:#333333; cursor: hand;

}

.TdOver2{

background:#e6e6e6;

height:18;

border:1px solid #cccccc;

border-top:1px solid #ffffff;

border-left:1px solid #ffffff;

color:#666666;cursor: hand;

}

.TdOut2{

background:#e6e6e6;

height:18;

border:1px solid #ffffff;

border-top:1px solid #cccccc;

border-left:1px solid #cccccc;

color:#000000; cursor: hand;

}

</style>

document.writeln("<div id='DateGird' style='display:none;position: absolute;border:1px solid #404040;background-color: #D4D0C8;'></div>");

var Glob_YY=parseInt(new Date().getFullYear());

var Glob_MM=parseInt(new Date().getMonth()+1);

var Glob_DD=parseInt(new Date().getDate());

function shotable(InputName)

{

var DateArray=["日","一","二","三","四","五","六"];

var output=""

output=output+"<div style='padding:5px;border-top:1px solid #f4f4f4;border-left:1px solid #f4f4f4;'><table style='width:156px;font-size:9pt;cursor:default;border:0px solid #999999;' border='0' cellpadding='0' cellspacing='0'>";

output=output+"<tr ><td colspan='7' class='TrTitle'><span ID='yearUU'>"+Glob_YY+"</span><span ID='monthUU'>"+Glob_MM+"</span></td></tr><table>";

output=output+"<table style='font-size:12px;font-family: "宋体", Helvetica, sans-serif;cursor:default;border:0px solid #999999;border-top:1px solid #404040;border-left:1px solid #404040;border-right:1px solid #efefef;border-bottom:1px solid #efefef;' border='1' cellpadding='0' cellspacing='0'>";

output=output+"<tr align='center'>";

for(var i=0;i<7;i++) output=output+"<td class='TrOver'>"+DateArray[i]+"</td>";

output=output+"</tr>";

for(var i=0;i<6;i++){

output=output+"<tr align='center'>";

for(var j=0;j<7;j++) output=output+"<td id='TD' name='TD' class='TdOver' onmouseover='datelist.OverBK(this,""+InputName.name+"")' msg=''> </td>";

output=output+"</tr>";

}

output=output+"</tabe></div>";

var selectMMInnerHTML = "<select ID="sMonth" onchange="setPan(document.getElementById('sYear').value,this.value)" style='width:50px;'>";

for (var i = 1; i < 13; i++)

{

if (i == Glob_MM)

{selectMMInnerHTML += "<option Author=wayx value='" + i + "' selected>" + i + "月" + "</option> ";}

else {selectMMInnerHTML += "<option Author=wayx value='" + i + "'>" + i + "月" + "</option> ";}

}

selectMMInnerHTML += "</select>";

var selectYYInnerHTML = "<select ID="sYear" onchange="setPan(this.value,document.getElementById('sMonth').value)" style='width:65px;'>";

for (var i = 1999; i <= Glob_YY; i++)

{

if (i == Glob_YY)

{selectYYInnerHTML += "<option Author=wayx value='" + i + "' selected>" + i + "年" + "</option> ";}

else {selectYYInnerHTML += "<option Author=wayx value='" + i + "'>" + i + "年" + "</option> ";}

}

selectYYInnerHTML += "</select>";

document.getElementById("DateGird").innerHTML= output;

document.getElementById("monthUU").innerHTML= selectMMInnerHTML;

document.getElementById("yearUU").innerHTML= selectYYInnerHTML;

//document.writeln(output);

}

function classGetDate(sName)

{

this.obj=sName || "uncDate";

//alert(Date.parse(this.obj.value));

this.YY=Glob_YY;

this.MM=Glob_MM;

this.DD=Glob_DD;

document.getElementById("DateGird").style.display="";

setPan(this.YY,this.MM);

}

function GetDay(y,m){

this.TDate=function(){

this.DayArray=[];

for(var i=0;i<42;i++)this.DayArray[i]=" ";

for(var i=0;i<new Date(y,m,0).getDate();i++)this.DayArray[i+new Date(y,m-1,1).getDay()]=i+1;

return this.DayArray;

}

return this;

}

function setPan(YY,MM)

{

var DArray=GetDay(YY,MM).TDate();

var TDArr=document.getElementsByName("TD");

if (MM<10){var showMM="0"+MM;}else{var showMM=MM;}

for(var i=0;i<TDArr.length;i++){

if (Glob_DD==DArray[i]&&YY==new Date().getFullYear()&&MM==new Date().getMonth()+1){TDArr[i].className="TdOut";}else{TDArr[i].className="TdOver"}

TDArr[i].innerHTML=DArray[i];

if (DArray[i]<10){var showDD="0"+DArray[i];}else{var showDD=DArray[i];}

TDArr[i].msg=YY+"-"+showMM+"-"+showDD;

}

datelist={

dfd:function (sName)

{

var dateGirdObj=document.getElementById("DateGird");

//var i= sName.style.top

dateGirdObj.style.top=cmGetY(sName)+20;

dateGirdObj.style.left=cmGetX(sName);

shotable(sName);

classGetDate(sName);

OverBK:function(t,m){

if(t.className!="TdOut"){

t.onmouseout=function(){t.className="TdOver";}

}

if(t.innerHTML!=" ")t.className="TdOut";

t.onclick=function(){

if (t.innerHTML!=" "){//alert(t.innerHTML);

document.getElementById(m).value=t.msg;

t.className="TdOver";

document.getElementById("DateGird").style.display="none";

}

function cmGetX (obj){var x = 0;do{x += obj.offsetLeft;obj = obj.offsetParent;}while(obj);return x;}

function cmGetY (obj){var y = 0;do{y += obj.offsetTop;obj = obj.offsetParent;}while(obj);return y;}

</script>

</head>

<body>

开始时间：<input name="number4" type="text" id="number4" onfocus="datelist.dfd(this)" readOnly>

结束时间：<input name="ddd3" type="text" id="ddd3" onfocus="datelist.dfd(this)" readOnly>

</body>

</html>

2.例子：

<html>

<head>

//日历

var date_start,date_end,g_object

var today = new Date();

var separator="-";

var inover=false;

//mode :时间变换的类型0-年 1-月 2-直接选择月

function change_date(temp,mode)

{

var t_month,t_year

if (mode){

if(mode==1)

t_month=parseInt(cele_date_month.value,10)+parseInt(temp,10);

else

t_month=parseInt(temp)

if (t_month<cele_date_month.options(0).text) {

cele_date_month.value=cele_date_month.options(cele_date_month.length-1).text;

change_date(parseInt(cele_date_year.value,10)-1,0);

}

else{

if (t_month>cele_date_month.options(cele_date_month.length-1).text){

cele_date_month.value=cele_date_month.options(0).text;

change_date(parseInt(cele_date_year.value,10)+1,0);

}

else

{cele_date_month.value=t_month;

set_cele_date(cele_date_year.value,cele_date_month.value);

}

else{

t_year=parseInt(temp,10);

if (t_year<cele_date_year.options(0).text) {

cele_date_year.value=cele_date_year.options(0).text;

set_cele_date(cele_date_year.value,1);

}

else{

if (parseInt(t_year,10)>parseInt(cele_date_year.options(cele_date_year.length-1).text,10)){

cele_date_year.value=cele_date_year.options(cele_date_year.length-1).text;

set_cele_date(cele_date_year.value,12);

}

else

{cele_date_year.value=t_year;

set_cele_date(cele_date_year.value,cele_date_month.value);

}

/*********2002-02-01 MODIFY BY WING **************/

window.cele_date.focus();

/****************MODIFY END***********************/

}

//初始化日历

function init(d_start,d_end)

{

var temp_str;

var i=0

var j=0

date_start=new Date(1980,7,1)

date_end=new Date(2004,8,1)

document.writeln("<div name="cele_date" id="cele_date" style="display:none" style="LEFT: 69px; POSITION: absolute; TOP: 159px;Z-INDEX:99" onClick="event.cancelBubble=true;" onBlur="hilayer()" onMouseout="lostlayerfocus()">-</div>");

window.cele_date.innerHTML="";

temp_str="<table border="1" bgcolor="#DDDDDD" bordercolor="white"><tr><td colspan=7 onmouseover="overcolor(this)">";

temp_str+="<input type="Button" value="<<" onclick="change_date(-1,1)" onmouseover="getlayerfocus()" style="color: #000099; background-color: #BFBFBF; cursor: hand">-";

temp_str+=""

temp_str+="<select name="cele_date_year" id="cele_date_year" language="javascript" onchange="change_date(this.value,0)" onmouseover="getlayerfocus()" onblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"

for (i=1900;i<=2020;i++)

{

temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";

}

temp_str+="</select>-";

temp_str+=""

temp_str+="<select name="cele_date_month" id="cele_date_month" language="javascript" onchange="change_date(this.value,2)" onmouseover="getlayerfocus()" onblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"

for (i=1;i<=12;i++)

{

temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";

}

temp_str+="</select>-";

temp_str+=""

temp_str+="<input type="Button" value=">>" onclick="change_date(1,1)" onmouseover="getlayerfocus()" style="color: #000099; background-color: #BFBFBF; cursor: hand">";

temp_str+="</td></tr><tr><td onmouseover="overcolor(this)">"

temp_str+="<font color=red>日</font></td><td>";temp_str+="一</td><td>"; temp_str+="二</td><td>"; temp_str+="三</td><td>"

temp_str+="四</td><td>";temp_str+="五</td><td>"; temp_str+="六</td></tr>";

for (i=1 ;i<=6 ;i++)

{

temp_str+="<tr>";

for(j=1;j<=7;j++){

temp_str+="<td name="c"+i+"_"+j+""id="c"+i+"_"+j+"" style="CURSOR: hand" style="COLOR:#000000" language="javascript" onmouseover="overcolor(this)" onmouseout="outcolor(this)" onclick="td_click(this)">?</td>"

}

temp_str+="</tr>"

}

temp_str+="</td></tr>";

temp_str+="<tr><td colspan=7>";

temp_str+="";

temp_str+="<select name="cele_date_hour" id="cele_date_hour" language="javascript" onmouseover="getlayerfocus()" onblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"

for (i=0;i<24;i++)

{

temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";

}

temp_str+="</select>:";

temp_str+="";

temp_str+="<select name="cele_date_minute" id="cele_date_minute" language="javascript" onmouseover="getlayerfocus()" onblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"

for (i=0;i<60;i++)

{

temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";

}

temp_str+="</select>:";

temp_str+="";

temp_str+="<select name="cele_date_second" id="cele_date_second" language="javascript" onmouseover="getlayerfocus()" onblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"

for (i=0;i<60;i++)

{

temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";

}

temp_str+="</select>";

temp_str+="";

temp_str+="</td></tr>";

temp_str+="</table>";

window.cele_date.innerHTML=temp_str;

}

function set_cele_date(year,month)

{

var i,j,p,k

var nd=new Date(year,month-1,1);

event.cancelBubble=true;

cele_date_year.value=year;

cele_date_month.value=month;

k=nd.getDay()-1

var temp;

for (i=1;i<=6;i++)

for(j=1;j<=7;j++)

{

eval("c"+i+"_"+j+".innerHTML=""");

eval("c"+i+"_"+j+".bgColor="#DDDDDD"");

eval("c"+i+"_"+j+".style.cursor="hand"");

}

while(month-1==nd.getMonth())

{ j=(nd.getDay() +1);

p=parseInt((nd.getDate()+k) / 7)+1;

eval("c"+p+"_"+j+".innerHTML="+"""+nd.getDate()+""");

if ((nd.getDate()==today.getDate())&&(cele_date_month.value==today.getMonth()+1)&&(cele_date_year.value==today.getYear())){

eval("c"+p+"_"+j+".bgColor="#EFFB64"");

}

if (nd>date_end || nd<date_start)

{

eval("c"+p+"_"+j+".bgColor="#FF9999"");

eval("c"+p+"_"+j+".style.cursor="text"");

}

nd=new Date(nd.valueOf() + 86400000);

}

//s_object：点击的对象；d_start-d_end有效的时间区段；需要存放值的控件；

function show_cele_date(d_start,d_end,t_object)

{

window.cele_date.style.display="";

window.cele_date.style.zIndex=99;

var s,cur_d

var eT = t_object.offsetTop;

var eH = t_object.offsetHeight+eT;

var dH = window.cele_date.style.pixelHeight;

var sT = document.body.scrollTop;

var sL = document.body.scrollLeft;

event.cancelBubble=true;

window.cele_date.style.posLeft = event.clientX-event.offsetX+sL-5;

window.cele_date.style.posTop = event.clientY-event.offsetY+eH+sT-5;

if (window.cele_date.style.posLeft+window.cele_date.clientWidth>document.body.clientWidth) window.cele_date.style.posLeft+=t_object.offsetWidth-window.cele_date.clientWidth;

if (d_start!=""){

if (d_start=="today"){

date_start=new Date(today.getYear(),today.getMonth(),today.getDate());

}else{

s=d_start.split(separator);

date_start=new Date(s[0],s[1]-1,s[2]);

}

}else{

date_start=new Date(1900,1,1);

}

if (d_end!=""){

s=d_end.split(separator);