<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>兼容各种浏览器的日期控件</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font: 12px/1.5em Tahoma, Helvetica, Arial, sans-serif;
}
a
{
text-decoration: none;
color: #000;
}
.inputWrap
{
500px;
border: 1px solid #DDD;
margin: 20px auto;
padding: 20px 30px;
}
h1
{
margin: 10px 0;
padding: 5px 10px;
border-left: 30px solid #ffd540;
font-size: 24px;
}
input.txt
{
200px;
height: 16px;
padding: 1px;
border: 1px solid #999;
}
#calWrap
{
position: absolute;
display: none;
148px;
background: #fff;
z-index: 9999;
border: 1px solid #999;
}
#dateIframe
{
position: absolute;
z-index: -1;
148px;
height: 169px;
top: 0;
left: 0;
border: none;
outline: none;
}
#calWrap .tool, #calWrap .week
{
clear: both;
}
#calWrap span, #calWrap #cal a
{
display: block;
float: left;
14px;
height: 14px;
padding: 2px 3px;
margin: 1px 0 0 1px;
background: #FFBC37;
cursor: pointer;
text-align: center;
line-height: 14px;
}
#calWrap .tool
{
background: #FFBC37;
}
#calWrap .tool span
{
margin: 0;
}
#calWrap .tool #selYear
{
34px;
}
#calWrap .tool #preYear, #calWrap .tool #nextYear
{
18px;
}
#calWrap .close
{
margin-top: 1px;
padding-right: 3px;
background: #FFBC37;
clear: both;
text-align: right;
}
#calWrap #cal a
{
background: #D0DAFD;
font-size: 11px;
text-decoration: none;
}
#calWrap #cal a.curDate
{
background: #FFBC37;
}
#calWrap #cal a:hover
{
background: #84A4F9;
}
#calWrap #cal a.null
{
background: #EDF1FE;
}
#calWrap #cal a.null:hover
{
background: #EDF1FE;
}
</style>
<script type="text/javascript">
function $i(id) {
return document.getElementById(id);
}
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}
var curDate = {
year: 0,
month: 0,
date: 0
};
var selDate = {
year: 0,
month: 0,
date: 0
};
var calWrap = null;
var outObj = null;
var outTxt = null;
var outBtn = null;
function calShow(txt, btn) {
if (typeof txt == 'string') {
outTxt = $i(txt);
} else {
outTxt = txt;
}
outBtn = (arguments.length == 1) ? null : btn;
outObj = outBtn || outTxt;
calWrap.style.display = "block";
var posx = findPosX(outObj);
var posy = findPosY(outObj);
var objHeight = outObj.offsetHeight;
calWrap.style.left = posx + "px";
calWrap.style.top = (posy + objHeight) + "px";
}
function calHide() {
calWrap.style.display = "none";
}
function preYear() {
if (selDate.year <= 1900) return;
selDate.year--;
createCalendar();
}
function nextYear() {
if (selDate.year >= 99999) return;
selDate.year++;
createCalendar();
}
function preMonth() {
if (selDate.month <= 0) {
selDate.year--;
selDate.month = 11;
} else {
selDate.month--;
}
createCalendar();
}
function nextMonth() {
if (selDate.month >= 11) {
selDate.year++;
selDate.month = 0;
} else {
selDate.month++;
}
createCalendar();
}
function setdate(j) {
var month, date;
if (selDate.month < 9) {
month = "0" + (selDate.month + 1);
} else {
month = (selDate.month + 1);
}
if (j < 10) {
date = "0" + j;
} else {
date = j;
}
var str = selDate.year + "-" + month + "-" + date;
outTxt.value = str;
calHide();
return false;
}
function createCalendar() {
var selDay = new Date(selDate.year, selDate.month, 1).getDay();
var selNum = new Date(selDate.year, selDate.month + 1, 0).getDate();
$i("selYear").innerHTML = selDate.year;
$i("selMonth").innerHTML = selDate.month + 1;
var dateA = $i("cal").getElementsByTagName("a");
for (var i = 0, j = 1; i < 42; i++) {
dateA[i].className = "";
if (i >= selDay && j <= selNum) {
if (selDate.year == curDate.year && selDate.month == curDate.month && j == curDate.date) {
dateA[i].className = "curDate";
}
dateA[i].num = dateA[i].innerHTML = j;
dateA[i].onclick = function () { setdate(this.num); }
j++;
} else {
dateA[i].innerHTML = "";
}
}
}
function init() {
var cur = new Date();
selDate.year = curDate.year = cur.getFullYear();
selDate.month = curDate.month = cur.getMonth();
selDate.date = curDate.date = cur.getDate();
calWrap = document.createElement("div");
calWrap.id = "calWrap";
document.body.appendChild(calWrap);
var str;
str = "<div class='tool'>" +
"<span id='preYear' class='btn' onclick='preYear()'><<</span>" +
"<span id='preMonth' class='btn' onclick='preMonth()'><</span>" +
"<span id='selYear'></span>" +
"<span id='selMonth'></span>" +
"<span id='nextMonth' class='btn' onclick='nextMonth()'>></span>" +
"<span id='nextYear' class='btn' onclick='nextYear()'>>></span>" +
"</div>" +
"<div class='week'>" +
"<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>" +
"</div>";
str += "<div id='cal'>";
for (var i = 0, j = 1; i < 42; i++) {
str += "<a href='#'></a>";
}
str += "</div>" +
"<div class='close'><a href='#' onclick='calHide()'>关闭</a></div><iframe id='dateIframe' frameborder=0></iframe>";
calWrap.innerHTML = str;
createCalendar();
document.onclick = function (e) {
var e = e || window.event;
var srcElement = e.srcElement || e.target;
if (srcElement != outTxt && srcElement != outBtn && srcElement.className != "btn") {
calHide();
}
};
}
window.onload = init;
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="inputWrap">
<h1>
Calendar</h1>
<input type="text" id="txtDate" readonly="readonly" class="txt" onfocus="calShow(this)">
<input type="button" id="btnDate" class="btn" onclick="calShow('txtDate',this)" value="Date">
</div>
</body>
</html>