相信许多人也在找！求一个既能调整日期又能调整小时、分钟的JS日历。各位大大就拿出来分享分享啊！

Question

其实网上有很多，我给你发一个我常用的
js：var class1="td-time2";//当前月的颜色
var class2="td-time1";//鼠标放上去时表格的颜色
var class3="td-time3";//前一个月和后一个月期的颜色
function showCalendar(obj)
{
var curDate=obj;
var Year=curDate.getFullYear();
var Month=curDate.getMonth();
var Day=curDate.getDate();
var Hour=curDate.getHours();
var Minute=curDate.getMinutes();
var Second=curDate.getSeconds();
var YearPrev,MonthPrev;
if(Month==0)
{
MonthPrev=11;
YearPrev=Year-1;
}
else
{
MonthPrev=Month-1;
YearPrev=Year;
}
var YearNext,MonthNext;
if(Month==11)
{
MonthNext=0;
YearNext=Year+1;
}
else
{
MonthNext=Month+1;
YearNext=Year;
}
tmpDate=new Date(Year,Month,1);

var Weekday=tmpDate.getDay();
tmpDate.setDate(40);
var totalDay=40-tmpDate.getDate();
tmpDate=new Date(YearPrev,MonthPrev,1);
tmpDate.setDate(40);
var totalDayPrev=40-tmpDate.getDate();
var thisdate=new Date();
var disstr="";
disstr="<table width=\"280\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\" >";
disstr+="<tr align=\"center\">"
disstr+="<td class=\"td-time-title\">日</td>"
disstr+="<td class=\"td-time-title\">一</td>"
disstr+="<td class=\"td-time-title\">二</td>"
disstr+="<td class=\"td-time-title\">三</td>"
disstr+="<td class=\"td-time-title\">四</td>"
disstr+="<td class=\"td-time-title\">五</td>"
disstr+="<td class=\"td-time-title\">六</td>"
disstr+="</tr><tr align=\"center\" class=\"td-time\">"
if(Weekday>0)
{
for(var i=0;i<Weekday;i++)
{
disstr+=writetd(YearPrev,MonthPrev,(totalDayPrev-Weekday+i+1),Hour,Minute,Second,class3);
}
for(i=1;i<=totalDay;i++)
{
if(Year==thisdate.getFullYear()&&Month==thisdate.getMonth()&&i==thisdate.getDate())
{
disstr+=writetd(Year,Month,i,Hour,Minute,Second,class2);
}
else
{
disstr+=writetd(Year,Month,i,Hour,Minute,Second,class1);
}
if(Weekday!=6)
{
Weekday++;
}
else
{
disstr+="</tr><tr align=\"center\" class=\"td-time\">"
Weekday=0;
}
}
if(Weekday!=6&&Weekday!=0)
{
for(i=1;Weekday<=6;Weekday++,i++)
{
disstr+=writetd(YearNext,MonthNext,i,Hour,Minute,Second,class3);
}
}
else if(Weekday==6)
{
disstr+=writetd(YearNext,MonthNext,1,Hour,Minute,Second,class3);
}
disstr+="</tr></table>";
}
else
{
for(i=1;i<=totalDay;i++)
{
disstr+=writetd(Year,Month,i,Hour,Minute,Second,class1);
if(Weekday!=6)
{
Weekday++;
}
else
{
disstr+="</tr><tr>";
Weekday=0;
}
}
if(Weekday!=6&&Weekday!=0)
{
for(i=1;Weekday<=6;Weekday++,i++)
{
disstr+=writetd(YearNext,MonthNext,i,Hour,Minute,Second,class3);
}
}
else if(Weekday==6)
{
disstr+=writetd(YearNext,MonthNext,1,Hour,Minute,Second,class3);
}
disstr+="</tr></table>";
}
//alert(disstr);
Calendar.innerHTML=disstr;
}
function writetd(year,month,day,hour,minute,second,clas)
{
var returnstr;
returnstr="<td align=center class=\""+clas+"\"  onmouseover='this.className=\""+class2+"\"' onmouseout='this.className=\""+clas+"\"' style='cursor:hand' onclick=";
returnstr+="funSetDate('"+year+"-"+doubledigit((month+1))+"-"+doubledigit(day)+";"+doubledigit(hour)+":"+doubledigit(minute)+":"+doubledigit(second);
returnstr+="')>"+day+"</td>";
return returnstr;
}
function doubledigit(source)
{
source=""+source;
if(source.length==2) return source;
else return "0"+source;
}function initpage()
{
var t=new Date();
//alert(location.href);
var qrystr=location.href.substring(location.href.indexOf("rtinput=")+8,location.href.length);
var qryary=qrystr.split(";");
var obj=document.all["daterange"];
if(qryary.length==3)
{
obj.value=qryary[1]+";"+qryary[2];
}
else
{
obj.value=(t.getFullYear()-5)+";"+(t.getFullYear()+5);
}
var argary=obj.value.split(";");
funSetYearSel(argary[0],argary[1],t.getFullYear());
document.all["fldMonth"].selectedIndex=t.getMonth();
document.all["fldHour"].selectedIndex=t.getHours();
document.all["fldMinute"].selectedIndex=t.getMinutes();
document.all["fldSecond"].selectedIndex=t.getSeconds();
showCalendar(t);
document.all["CurDay"].innerHTML="<font style='color:#000000;'><b>现在是："+t.getFullYear()+"年"+(t.getMonth()+1)+"月"+t.getDate()+"日 "+doubledigit(t.getHours())+":"+doubledigit(t.getMinutes())+":"+doubledigit(t.getSeconds())+"</b></font>";
//alert(qryary[0]);
document.all["rtinput"].value=qryary[0];
window.focus();
}
function funSetYearSel(begin,tail,cur)
{
document.all["fldYear"].length=0;
for(i=begin;i<=tail;i++)
{
document.all["fldYear"].length++;
document.all["fldYear"].options[document.all["fldYear"].length-1].text=i;
document.all["fldYear"].options[document.all["fldYear"].length-1].value=i;
if(i==cur) document.all["fldYear"].options[document.all["fldYear"].length-1].selected=true;
}
}
function funSetDate(argdate)
{

var inputname=document.all.rtinput.value;
var qryary=argdate.split(";");
//alert(argdate);
window.opener.document.all[inputname].value=qryary[0]+" "+qryary[1];
//window.opener.document.all[inputname].value=argdate;
self.close();
}
function funChangeCal()
{
var t=new Date(document.all["fldYear"].value,document.all["fldMonth"].value,1,document.all["fldHour"].value,document.all["fldMinute"].value,document.all["fldSecond"].value);
showCalendar(t);
}
function funDecMonth()
{
var selyear=document.all["fldYear"];
var selmonth=document.all["fldMonth"];
if(selmonth.selectedIndex>0)
{
selmonth.selectedIndex--;
}
else
{
selmonth.selectedIndex=11;
if(selyear.selectedIndex>0)
{
selyear.selectedIndex--;
}
else
{
funSetYearSel(selyear.options[0].value-1,selyear.options[selyear.length-1].value,selyear.options[0]-1);
}
}
funChangeCal();
}
function funAddMonth()
{
var selyear=document.all["fldYear"];
var selmonth=document.all["fldMonth"];
if(selmonth.selectedIndex<11)
{
selmonth.selectedIndex++;
}
else
{
selmonth.selectedIndex=0;
if(selyear.selectedIndex<selyear.length-1)
{
selyear.selectedIndex++;
}
else
{
funSetYearSel(selyear.options[0].value,parseInt(selyear.options[selyear.length-1].value)+1,parseInt(selyear.options[selyear.length-1].value)+1);
}
}
funChangeCal();
}

Answer 1

jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0088)http://localhost:7001/cmpWeb/calendar/Calendar2.htm?open&rtinput=time_Bcondition;1946;2016 -->
<HTML>
<HEAD>
<TITLE>日期时间选择器</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
FONT-SIZE: 12px;
BACKGROUND-ATTACHMENT: fixed;
FONT-FAMILY: "宋体";
BACKGROUND-COLOR: #fffaf0;
color: #FFFFFF;
background-repeat: no-repeat;
}
TD {
BORDER-RIGHT: 0px; PADDING-RIGHT: 1px; BORDER-TOP: 0px; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; BORDER-LEFT: 0px; PADDING-TOP: 1px; BORDER-BOTTOM: 0px; FONT-FAMILY: "宋体"; BORDER-COLLAPSE: collapse
}
TABLE {
BORDER-RIGHT: 0px; PADDING-RIGHT: 1px; BORDER-TOP: 0px; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; BORDER-LEFT: 0px; PADDING-TOP: 1px; BORDER-BOTTOM: 0px; FONT-FAMILY: "宋体"; BORDER-COLLAPSE: collapse
}
.td-time{font-size:12px;color:#FFFFFF;height:18px;background-image:url(time-bj2.gif);background-repeat:y-repeat; }
.td-time-title{
font-size:13px;
color:#FFFFFF;
font-weight:bold;
height:20px;
background-image:url(time-bj1.gif);
background-repeat:y-repeat;
}
.td-time1{
font-size:12px;
color:#000000;
height:18px;
font-weight:normal;
background-image:url(time-bj3.gif);
background-repeat:no-repeat;
background-position:center;
font-family: "宋体";
}
.td-time2{
font-size:12px;
color:#00FFFF;
height:18px;
font-family: "宋体";
font-weight: normal;
}
.td-time3{
font-size:12px;
color:#FFA200;
height:18px;
font-family: "宋体";
}</STYLE>
<SCRIPT language=JavaScript src="Calendar2.js">
</SCRIPT>
<META content="MSHTML 6.00.2800.1561" name=GENERATOR>
<style type="text/css">
<!--
select {
font-size: 12px;
font-family: "宋体";
}
a:link {
font-family: "宋体";
font-size: 12px;
color: #FFFFFF;
text-decoration: underline;
}
a:visited {
color: #000000;
text-decoration: underline;
font-family: "宋体";
font-size: 12px;
}
a:hover {
color: #000000;
text-decoration: underline;
font-family: "宋体";
font-size: 12px;
}
a:active {
font-family: "宋体";
font-size: 12px;
}
-->
</style>
</HEAD>
<body background="time-bj.gif" leftmargin="0"
topmargin="0" onload="initpage()">
<table width="310"  border="0" cellpadding="0" cellspacing="0">
  <tr><td height="4"></td></tr>
  <tr>
    <td> 
      <TABLE width="96%" height="28" border="0" align=center cellpadding="0" cellspacing="0" background="time-tu1.gif">
        <TR> 
      <TD width="52%" align=middle> 
        <SELECT onchange=funChangeCal() 
    name=fldYear>
        </SELECT>
        年</TD>
      <TD width="48%" align=middle> 
        <SELECT onchange=funChangeCal() name=fldMonth>
          <OPTION 
        value=0 selected>一</OPTION>
          <OPTION value=1>二</OPTION>
          <OPTION 
        value=2>三</OPTION>
          <OPTION value=3>四</OPTION>
          <OPTION value=4>五</OPTION>
          <OPTION value=5>六</OPTION>
          <OPTION value=6>七</OPTION>
          <OPTION value=7>八</OPTION>
          <OPTION value=8>九</OPTION>
          <OPTION value=9>十</OPTION>
          <OPTION value=10>十一</OPTION>
          <OPTION value=11>十二</OPTION>
        </SELECT>
        月</TD>
    </TR></TABLE><TABLE width="97%"  border="0" align=center cellpadding="0" cellspacing="0" >
  <tr><td height="4"></td></tr> <tr>
   <td align="center">
<div id=Calendar></div>
</td></tr></table>

Answer 2

  <TABLE width="96%" height="28" border="0" align=center cellpadding="0" cellspacing="0" background="time-tu3.gif">
        <TR> 
          <TD width="33%" align=center> 
            <select name=fldHour onchange=funChangeCal()>
              <option value=00>00</option>
              <option value=01>01</option>
              <option value=02>02</option>
              <option value=03>03</option>
              <option value=04>04</option>
              <option value=05>05</option>
              <option value=06>06</option>
              <option value=07>07</option>
              <option value=08>08</option>
              <option value=09>09</option>
              <option value=10>10</option>
              <option value=11>11</option>
              <option value=12>12</option>
              <option value=13>13</option>
              <option value=14>14</option>
              <option value=15>15</option>
              <option value=16>16</option>
              <option value=17>17</option>
              <option value=18>18</option>
              <option value=19>19</option>
              <option value=20>20</option>
              <option value=21>21</option>
              <option value=22>22</option>
              <option value=23>23</option>
            </select>
            时 </TD>
          <TD width="33%" align=center> 
            <select name=fldMinute onchange=funChangeCal()>
              <option value=00>00</option>
              <option value=01>01</option>
              <option value=02>02</option>
              <option value=03>03</option>
              <option value=04>04</option>
              <option value=05>05</option>
              <option value=06>06</option>
              <option value=07>07</option>
              <option value=08>08</option>
              <option value=09>09</option>
              <option value=10>10</option>
              <option value=11>11</option>
              <option value=12>12</option>
              <option value=13>13</option>
              <option value=14>14</option>
              <option value=15>15</option>
              <option value=16>16</option>
              <option value=17>17</option>
              <option value=18>18</option>
              <option value=19>19</option>
              <option value=20>20</option>
              <option value=21>21</option>
              <option value=22>22</option>
              <option value=23>23</option>
              <option value=24>24</option>
              <option value=25>25</option>
              <option value=26>26</option>
              <option value=27>27</option>
              <option value=28>28</option>
              <option value=29>29</option>
              <option value=30>30</option>
              <option value=31>31</option>
              <option value=32>32</option>
              <option value=33>33</option>
              <option value=34>34</option>
              <option value=35>35</option>
              <option value=36>36</option>
              <option value=37>37</option>
              <option value=38>38</option>
              <option value=39>39</option>
              <option value=40>40</option>
              <option value=41>41</option>
              <option value=42>42</option>
              <option value=43>43</option>
              <option value=44>44</option>
              <option value=45>45</option>
              <option value=46>46</option>
              <option value=47>47</option>
              <option value=48>48</option>
              <option value=49>49</option>
              <option value=50>50</option>
              <option value=51>51</option>
              <option value=52>52</option>
              <option value=53>53</option>
              <option value=54>54</option>
              <option value=55>55</option>
              <option value=56>56</option>
              <option value=57>57</option>
              <option value=58>58</option>
              <option value=59>59</option>
            </select>
            分</TD>
          <TD width="33%" align=center> 
            <select name=fldSecond onchange=funChangeCal()>
              <option value=00>00</option>
              <option value=01>01</option>
              <option value=02>02</option>
              <option value=03>03</option>
              <option value=04>04</option>
              <option value=05>05</option>
              <option value=06>06</option>
              <option value=07>07</option>
              <option value=08>08</option>
              <option value=09>09</option>
              <option value=10>10</option>
              <option value=11>11</option>
              <option value=12>12</option>
              <option value=13>13</option>
              <option value=14>14</option>
              <option value=15>15</option>
              <option value=16>16</option>
              <option value=17>17</option>
              <option value=18>18</option>
              <option value=19>19</option>
              <option value=20>20</option>
              <option value=21>21</option>
              <option value=22>22</option>
              <option value=23>23</option>
              <option value=24>24</option>
              <option value=25>25</option>
              <option value=26>26</option>
              <option value=27>27</option>
              <option value=28>28</option>
              <option value=29>29</option>
              <option value=30>30</option>
              <option value=31>31</option>
              <option value=32>32</option>
              <option value=33>33</option>
              <option value=34>34</option>
              <option value=35>35</option>
              <option value=36>36</option>
              <option value=37>37</option>
              <option value=38>38</option>
              <option value=39>39</option>
              <option value=40>40</option>
              <option value=41>41</option>
              <option value=42>42</option>
              <option value=43>43</option>
              <option value=44>44</option>
              <option value=45>45</option>
              <option value=46>46</option>
              <option value=47>47</option>
              <option value=48>48</option>
              <option value=49>49</option>
              <option value=50>50</option>
              <option value=51>51</option>
              <option value=52>52</option>
              <option value=53>53</option>
              <option value=54>54</option>
              <option value=55>55</option>
              <option value=56>56</option>
              <option value=57>57</option>
              <option value=58>58</option>
              <option value=59>59</option>
            </select>
            秒 </TD>
        </TR>
      </TABLE>
<TABLE border="0" align=center cellpadding="0" cellspacing="0" width="95%">    <TR> 
      <TD align="center" valign="middle" background="time-tu2.gif" style="HEIGHT: 24px;"> 
        <DIV id=CurDay></DIV></TD>
    </TR></TABLE>
</TD>
    </TR>
</table>
<INPUT type=hidden name=rtinput> 
<INPUT type=hidden value=2000;2050 name=daterange> </BODY></HTML>