JavaScript弹出式日历控件无jquery-白红宇

JavaScript弹出式日历控件无jquery

阅读量：4353 次

发布时间：2019-06-07

本文共 2615 字，大约阅读时间需要 8 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>弹出式JavaScript日历控件</title>

<style>

.tcalInput{background: url('/jscss/demoimg/201311/cal.gif') 100% 50% no-repeat;padding-right: 20px;cursor: pointer;}

.tcalActive{background-image: url('/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('/jscss/demoimg/201311/prev_year.gif');}

#tcalPrevMonth{background-image: url('/jscss/demoimg/201311/prev_mon.gif');}

#tcalNextMonth{background-image: url('/jscss/demoimg/201311/next_mon.gif');}

#tcalNextYear{background-image: url('/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>

</head>

<body>

<div>

</div>

</form>

</center>

</body>

</html>

转载于:https://www.cnblogs.com/youtianxia/p/3813071.html

你可能感兴趣的文章