<script>
function showhide(obj)
{
if(obj.checked)
mydiv.style.display="block";
else
mydiv.style.display="none";
}
</script>
<input type=checkbox onclick=showhide(this)>date
<div id=mydiv style="display:none">
from<input>to<input>
</div>

解决方案 »

  1.   

    试一下这个例子吧:
    http://www.atmpart.com.cn/sample.htm
    如果觉得还可以哪就下载这两个文件:
    http://www.atmpart.com.cn/include/calendar.htm
    http://www.atmpart.com.cn/include/htc/calendar.htc
      

  2.   

    给个例子
    <html>
    <head>
    <title>日期选择</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <STYLE TYPE="text/css"> 
    .normal{BACKGROUND: #ffffff} 
    .today {font-weight:bold;BACKGROUND: #6699cc} 
    .satday{color:green} 
    .sunday{color:red} 
    .days {font-weight:bold}
    </STYLE>
    </head>
    <body bgcolor="#FFFFFF" text="#000000" onload="newCalendar();" onmousemove = "dragIt();" onmousedown = "engage();" onmouseup = "release();">
    <div id="imgg" style="position:absolute;display:none; left: 321px; width: 137px; height: 56px; top: 12px;  border: 1px none #000000"> 
      <table align="center" border="0" bgcolor="#000000" cellpadding="1" cellspacing="1">
      <tr bgcolor="#ccFFcc" onmousedown="this.style.background='#eeffee';" onmouseup="this.style.background='#ccffcc';">
          <td name="ii" align="right" height="10"><img style="cursor:crosshair;" src="close.gif" border="0" onclick="clos();" alt="关闭" width="10" height="10"></td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF"> 
    <SCRIPT LANGUAGE="JavaScript">
    var selectedObj;
    var offsetX, offsetY;
    var ttt;
    function shiftTo(x,y) {
    imgg.style.top=y;
    imgg.style.left=x;
    }
    function dragIt() {
    if(selectedObj)
    {
    shiftTo((window.event.clientX - offsetX),(window.event.clientY - offsetY))
    }
    }
    function engage()
    {
    if(event.srcElement.tagName=="TD"&&event.srcElement.name=="ii")
    {
    selectedObj=true;
    offsetX = window.event.offsetX;
    offsetY = window.event.offsetY;
    }
    }
    function release(evt) {
    selectedObj=false;
    }
    function clos()
    {
    imgg.style.display="none";
    }
    function clic(v)
    {
    ttt=v;
    imgg.style.display="block";
    imgg.style.top=window.event.clientY;
    imgg.style.left=window.event.clientX;
    }var months = new Array("一月", "二月", "三月", 
    "四月", "五月", "六月", "七月", "八月", "九月", 
    "十月", "十一月", "十二月"); 
    var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 
    30, 31, 30, 31); 
    /*var days = new Array("Sunday", "Monday", "Tuesday", 
    "Wednesday", "Thursday", "Friday", "Saturday");*/ 
    var days = new Array("日","一", "二", "三", 
    "四", "五", "六"); 
    function getDays(month, year) { if (1 == month) 
    return ((0 == year % 4) && (0 != (year % 100))) || 
    (0 == year % 400) ? 29 : 28; 
    else 
    return daysInMonth[month]; 
    } function getToday() { 
    //得到今天的年,月,日 
    this.now = new Date(); 
    this.year = this.now.getFullYear(); 
    this.month = this.now.getMonth(); 
    this.day = this.now.getDate(); 

    today = new getToday(); function newCalendar() { today = new getToday(); 
    var parseYear = parseInt(document.all.year 
    [document.all.year.selectedIndex].text); 
    var newCal = new Date(parseYear, 
    document.all.month.selectedIndex, 1); 
    var day = -1; 
    var startDay = newCal.getDay(); 
    var daily = 0; 
    if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth())) 
    day = today.day; 
    var tableCal = document.all.calendar.tBodies.dayList; 
    var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear()); 
    for (var intWeek = 0; intWeek < tableCal.rows.length;intWeek++) 
    for (var intDay = 0;intDay < tableCal.rows[intWeek].cells.length;intDay++) 

    var cell = tableCal.rows[intWeek].cells[intDay]; 
    if ((intDay == startDay) && (0 == daily)) 
    daily = 1; 
    if(day==daily) 
    //今天,调用今天的Class 
    cell.className = "today"; 
    else if(intDay==6) 
    //周六 
    cell.className = "sunday"; 
    else if (intDay==0) 
    //周日 
    cell.className ="satday"; 
    else 
    //平常 
    cell.className="normal"; if ((daily > 0) && (daily <= intDaysInMonth)) 

    cell.innerText = daily; 
    daily++; 

    else 
    cell.innerText = ""; 

    } function getDate() { 
    var sDate; 
    //这段代码处理鼠标点击的情况 
    if ("TD" == event.srcElement.tagName) 
    if ("" != event.srcElement.innerText) 

    eval("document.all."+ttt).value=document.all.year.value + "-" + document.all.month.value + "-" + event.srcElement.innerText;
    imgg.style.display="none";


    </SCRIPT>
    <input type="hidden" name="ret">
          <TABLE ID="calendar" cellspacing="0" cellpadding="0" border=0 align="center">
      <THEAD> 
      <TR> 
    <TD COLSPAN=7 ALIGN=CENTER> 
    <SELECT ID="month" ONCHANGE="newCalendar()"> 
    <SCRIPT LANGUAGE="JavaScript"> 
    for (var intLoop = 0; intLoop < months.length; 
    intLoop++) 
    document.write("<OPTION VALUE= " + (intLoop + 1) + " " + 
    (today.month == intLoop ? 
    "Selected" : "") + ">" + 
    months[intLoop]); 
    </SCRIPT> 
    </SELECT> <SELECT ID="year" ONCHANGE="newCalendar()"> 
    <SCRIPT LANGUAGE="JavaScript"> 
    for (var intLoop = today.year-100; intLoop < (today.year + 64); 
    intLoop++) 
    document.write("<OPTION VALUE= " + intLoop + " " + 
    (today.year == intLoop ? 
    "Selected" : "") + ">" + 
    intLoop); 
    </SCRIPT> 
    </SELECT> 
    </TD> 
    </TR> 
    <TR CLASS="days"> 
    <SCRIPT LANGUAGE="JavaScript"> document.write("<TD class=satday>" + days[0] + "</TD>"); 
    for (var intLoop = 1; intLoop < days.length-1; 
    intLoop++) 
    document.write("<TD>" + days[intLoop] + "</TD>"); 
    document.write("<TD class=sunday>" + days[intLoop] + "</TD>"); 
    </SCRIPT> 
    </TR> 
    </THEAD> 
    <TBODY border=1 cellspacing="0" cellpadding="0" ID="dayList"ALIGN=CENTER ONCLICK="getDate()"> 
    <SCRIPT LANGUAGE="JavaScript"> 
    for (var intWeeks = 0; intWeeks < 6; intWeeks++) { 
    document.write("<TR style='cursor:hand'>"); 
    for (var intDays = 0; intDays < days.length; 
    intDays++) 
    document.write("<TD></TD>"); 
    document.write("</TR>"); 

    </SCRIPT> 
    </TBODY> 
    </TABLE> 
    <div align="center"></div>
    <div align="center">
      <Script Language="JavaScript1.2"> function Cancel() { 
    document.all.ret.value = ""; 
    window.close(); 
    }</script>
    </div>
    </td>
    </tr>
    </table>
    </div>
    <a href=# onclick="javascript:clic('t1');">click</a> here input starttime:<input type="text" name="t1" readonly><a href=# onclick="javascript:clic('t2');">click</a> here input endtime:<input type="text" name="t2" readonly>
    </body>
    </html>