无jquery的JavaScript弹出式日历控件

时间：2013-11-19 16:09 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>弹出式JavaScript日历控件</title>
<style>
.tcalInput{background: url('http://www.codefans.net/jscss/demoimg/201311/cal.gif') 100% 50% no-repeat;padding-right: 20px;cursor: pointer;}
.tcalActive{background-image: url('http://www.codefans.net/jscss/demoimg/201311/no_cal.gif');}
#tcal{position: absolute;visibility: hidden;z-index: 100;width: 170px;background-color: white;margin-top: 2px;padding: 0 2px 2px 2px;border: 1px solid silver;-moz-box-shadow: 3px 3px 4px silver;-webkit-box-shadow: 3px 3px 4px silver;box-shadow: 3px 3px 4px silver;-ms-filter: "progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver')";filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver');}
#tcalControls{border-collapse: collapse;border: 0;width: 100%;}
#tcalControls td{border-collapse: collapse;border: 0;padding: 0;width: 16px;background-position: 50% 50%;background-repeat: no-repeat;cursor: pointer;}
#tcalControls th{border-collapse: collapse;border: 0;padding: 0;line-height: 25px;font-size: 10px;text-align: center;font-family: Tahoma, Geneva, sans-serif;font-weight: bold;white-space: nowrap;}
#tcalPrevYear{background-image: url('http://www.codefans.net/jscss/demoimg/201311/prev_year.gif');}
#tcalPrevMonth{background-image: url('http://www.codefans.net/jscss/demoimg/201311/prev_mon.gif');}
#tcalNextMonth{background-image: url('http://www.codefans.net/jscss/demoimg/201311/next_mon.gif');}
#tcalNextYear{background-image: url('http://www.codefans.net/jscss/demoimg/201311/next_year.gif');}
#tcalGrid{border-collapse: collapse;border: 1px solid silver;width: 100%;}
#tcalGrid th{border: 1px solid silver;border-collapse: collapse;padding: 3px 0;text-align: center;font-family: Tahoma, Geneva, sans-serif;font-size: 10px;background-color: gray;color: white;}
#tcalGrid td{border: 0;border-collapse: collapse;padding: 2px 0;text-align: center;font-family: Tahoma, Geneva, sans-serif;width: 14%;font-size: 11px;cursor: pointer;}
#tcalGrid td.tcalOtherMonth{color: silver;}
#tcalGrid td.tcalWeekend{background-color: #ACD6F5;}
#tcalGrid td.tcalToday{border: 1px solid red;}
#tcalGrid td.tcalSelected{background-color: #FFB3BE;}
</style>
<script type="text/javascript" src="http://www.codefans.net/jscss/demoimg/201311/date.js"></script>
</head>
<body>
<center>
<form action="#">
  
  <div>
    <input type="text" name="date" class="tcal" value="" />
  </div>
</form>
</center>
</body>
</html>

无jquery的JavaScript弹出式日历控件

网页特效