JS时间控件（自己写的）
时间：2011-03-03 来源：cfd406635982
其效果图如下：
写的时候是用IE8和firefox测试的。所以应该不支持IE6.机器没有安装IE6浏览器。以后可以改改。简单的测试了一下，如果发现有bug，可以告诉我 呵呵
代码如下：
/** 作者： cfd406635982 **/
/**
*使用方法：
*<input type="text" onClick="createCalendar(this)"/>
*要调用控件，则调用createCalendar(obj)方法，其中的obj是要调用的对象，必须为input的text类型
*时间：2011-03-03
*/
document.write("<div id='dwCalenderDiv' style='position: absolute;z-index: 9999; width: 225px; display:none;'>");
document.write("</div>");
document.write("<style type='text/css'>.dwCalendar{ font-size: 10px; margin: 0; padding: 0; border-collapse: collapse; border-spacing: 0px; width:224px; text-align: center; } .dwCalendar td{ border: 1px solid #9999FF; text-align: center; vertical-align: middle; width:32px; background-color: Silver; } .dwCalendarTitle td { margin: 0; padding: 0; background-color: #FF9966; border-color: white; } </style>");
var target = new Object();//获取要显示时间控件的对象
var today = new Date().getDate();//获取当前日期
var isShow = false;//时间控件是否为显示状态
//当窗口调整改变的时候，调整控件显示
window.onresize = function () {
if(isShow) {
createCalendar(target);
}
}
//创建时间控件
function createCalendar(obj) {
if(obj.type != "text") {
alert("时间控件只适用于Input-text类型!");
return;
}
var inputDate = obj.value;//input里面的值
var initDate = new Date();
if(inputDate!="" && inputDate.match(/^(19[0-9]{2}|2[0-9]{3})-([1-9]|[0][1-9]|1[012])-([1-9]|0[1-9]|[1][0-9]|[2][0-9]|[3][01])$/)) {
inputDate = inputDate.replace("-","/");
initDate = new Date(inputDate);
if(!initDate) {
initDate = new Date();
}
}
target = obj; //要赋值的对象
var x = obj.offsetLeft;//对象的坐标
var y = obj.offsetTop;
var height = obj.offsetHeight; //对象的高度
var divX = x; //时间控件的显示X坐标
var divY = y + height;//时间控件的显示Y坐标
var myCalender = document.getElementById("dwCalenderDiv");
if(divY > document.body.clientHeight/2) {
var divY = y - 140 - height; //时间控件的显示Y坐标
}
myCalender.style.top = divY;
myCalender.style.left = divX;
myCalender.style.display = "block";
myCalender.innerHTML = "<table class='dwCalendar' id='dwCalendarTable'><tr class='dwCalendarTitle'><td onmouseover='mouseOverLeftTriangle(this);' onmouseout='mouseOutLeftTriangle(this);'><div onclick='addYear(-1)' style='padding-left: 8px;position: absolute;'><div style='position: relative;top: -6px;left: -5;*left: -12;border-top:6px solid #FF9966;border-right:6px solid blue;border-bottom:6px solid #FF9966;'></div><div style='position: relative;top: -18px;left: 3;*left: -4;border-top:6px solid #FF9966;border-right:6px solid blue;border-bottom:6px solid #FF9966;'></div></div></td><td onmouseover='mouseOverLeftTriangle(this);' onmouseout='mouseOutLeftTriangle(this);'><div style='padding-right: 8px;' onclick='addMonth(-1)' ><div style='border-top:6px solid #FF9966;border-right:6px solid blue;border-bottom:6px solid #FF9966'></div></div></td><td align='center' id='yearTd' ondblclick='showYearInput();'><input onblur='toYear();' type='text' style='width: 35px; display: none; text-align: center;' id='yearInput'/><span id='yearShow'>2011</span></td><td align='center'></td><td align='center' id='monthTd' ondblclick='showMonthInput();'><input onblur='toMonth();' type='text' style='width: 35px; display: none; text-align: center;' id='monthInput'/><span id='monthShow'>十二月</span></td><td onmouseover='mouseOverRightTriangle(this);' onmouseout='mouseOutRightTriangle(this);'><div style='padding-left: 10px;' onclick='addMonth(1)' ><div style='border-top:6px solid #FF9966;border-left:6px solid blue;border-bottom:6px solid #FF9966'></div></div></td><td onmouseover='mouseOverRightTriangle(this);' onmouseout='mouseOutRightTriangle(this);'><div onclick='addYear(1)' style='padding-left: 10px;position: absolute;'><div style='position: relative;top: -6px;left: -5;*left: -12;border-top:6px solid #FF9966;border-left:6px solid blue;border-bottom:6px solid #FF9966;'></div><div style='position: relative;top: -18px;left: 3;*left: -4;border-top:6px solid #FF9966;border-left:6px solid blue;border-bottom:6px solid #FF9966;'></div></div></td></tr><tr class='dwCalendarTitle'><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr><tr><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td></tr><tr><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td></tr><tr><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td></tr><tr><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td></tr><tr><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td></tr><tr><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td><td onmouseover='mouseOverColor(this);' dwCalendarDate='none' onclick='getDate(this)' onmouseout='mouseOutColor(this);'>1</td></tr></table>";
setDate(initDate.getFullYear(),initDate.getMonth(),initDate.getDate());
isShow = true;
}
var months = new Array();
months[0] = "一月";
months[1] = "二月";
months[2] = "三月";
months[3] = "四月";
months[4] = "五月";
months[5] = "六月";
months[6] = "七月";
months[7] = "八月";
months[8] = "九月";
months[9] = "十月";
months[10] = "十一月";
months[11] = "十二月";
//鼠标经过右边的三角选择器(选择年和月的三角)，改变三角颜色
function mouseOverRightTriangle(overDiv) {
overDiv.style.cursor = "pointer";
var childDiv = overDiv.childNodes[0].childNodes;
for(var i=0;i<childDiv.length;i++) {
var child = childDiv[i];
child.style.borderTop = "6px solid #FF9966";
child.style.borderLeft = "6px solid #FFCC99";
child.style.borderbottom = "6px solid #FF9966";
}
}
//鼠标退出右边的三角选择器(选择年和月的三角)，改变三角颜色
function mouseOutRightTriangle(overDiv) {
var childDiv = overDiv.childNodes[0].childNodes;
for(var i=0;i<childDiv.length;i++) {
var child = childDiv[i];
child.style.borderTop = "6px solid #FF9966";
child.style.borderLeft = "6px solid blue";
child.style.borderbottom = "6px solid #FF9966";
}
}
//鼠标退出左边的三角选择器(选择年和月的三角)，改变三角颜色
function mouseOverLeftTriangle(overDiv) {
overDiv.style.cursor = "pointer";
var childDiv = overDiv.childNodes[0].childNodes;
for(var i=0;i<childDiv.length;i++) {
var child = childDiv[i];
child.style.borderTop = "6px solid #FF9966";
child.style.borderRight = "6px solid #FFCC99";
child.style.borderbottom = "6px solid #FF9966";
}
}
//鼠标退出左边的三角选择器(选择年和月的三角)，改变三角颜色
function mouseOutLeftTriangle(overDiv) {
var childDiv = overDiv.childNodes[0].childNodes;
for(var i=0;i<childDiv.length;i++) {
var child = childDiv[i];
child.style.borderTop = "6px solid #FF9966";
child.style.borderRight = "6px solid blue";
child.style.borderbottom = "6px solid #FF9966";
}
}
var showYear;//当前控件显示的年份
/** 显示年份输入框 **/
function showYearInput() {
var yearShow = document.getElementById("yearShow");
var yearText = yearShow.innerHTML;
showYear = yearText;
yearShow.innerHTML = "";
var yearInput = document.getElementById("yearInput");
yearInput.value = yearText;
yearInput.style.display = "inline";
yearInput.select();
}
/** 手动输入年份 **/
function toYear() {
var yearInput = document.getElementById("yearInput");
var yearShow = document.getElementById("yearShow");
var pYear = yearInput.value;
var month = document.getElementById("monthShow").innerHTML;
var PMonth;
var pDate;
var monthsIndex;
for(var i=0;i<months.length;i++) {
if(month == months[i]) {
monthsIndex = i;
}
}
PMonth = monthsIndex;
if(pYear > 2999 || pYear < 1900 || !pYear.match(/^[0-9]*$/)) {
alert("请正确输入日期");
yearInput.style.display = "none";
yearShow.innerHTML = showYear;
yearShow.style.display = "inline";
}else {
yearInput.style.display = "none";
yearShow.innerHTML = pYear;
yearShow.style.display = "inline";
var pDate = new Date(pYear,PMonth,new Date().getDate());
setDate(pDate.getFullYear(), pDate.getMonth(), pDate.getDate() );
}
}
var showMonth;//当前控件显示的月份
/** 显示月份输入框 **/
function showMonthInput() {
var monthShow = document.getElementById("monthShow");
var monthText = monthShow.innerHTML;
if(!monthText) {
return;
}
showMonth = monthText;
monthShow.innerHTML = "";
var monthInput = document.getElementById("monthInput");
var monthsIndex;
for(var i=0;i<months.length;i++) {
if(monthText == months[i]) {
monthsIndex = i;
}
}
monthInput.value = monthsIndex - 0 + 1;
monthInput.style.display = "inline";
monthInput.select();
}
/** 手动输入月份 **/
function toMonth() {
var pYear = document.getElementById("yearShow").innerHTML;
var PMonth = document.getElementById("monthInput").value - 1;
var monthShow = document.getElementById("monthShow");
var monthInput = document.getElementById("monthInput");
if(!months[PMonth]) {
alert("月份格式不正确");
monthInput.style.display = "none";
monthShow.innerHTML = showMonth;
}else {
monthInput.style.display = "none";
monthShow.innerHTML = months[PMonth];
var pDate = new Date(pYear,PMonth,new Date().getDate());
setDate(pDate.getFullYear(), pDate.getMonth(), pDate.getDate() );
}
}
/**
*参数：年、月、日
*设置时间显示
*
*/
function setDate(pYear, pMonth, pDate) {
var pDate = new Date(pYear, pMonth, pDate); //构造时间
var dwCalendarTable = document.getElementById("dwCalendarTable");
pDate.setDate(1);//当当前日期指向当月的1日
var day = pDate.getDay();//当月1日是星期几(day为星期日期减一)
var maxDate = new Date(pDate.getFullYear(), pDate.getMonth() + 1, 0).getDate();//获取到当月的最大日期
var count = 1;
//设置第3排tr，显示当月的日期
for(var i=day;i<7;i++) {
var cell = dwCalendarTable.rows[2].cells[i];
cell.setAttribute("dwCalendarDate", count);
cell.style.backgroundColor="Silver";
if(count==today) {
cell.style.backgroundColor="#00FFFF";
}
cell.innerHTML = count++;
}
//设置第4到6排tr，显示当月的日期
for(var j=3;j<6;j++) {
for(var i=0;i<7;i++) {
var cell = dwCalendarTable.rows[j].cells[i];
cell.setAttribute("dwCalendarDate", count);
cell.style.backgroundColor="Silver";
if(count==today) {
cell.style.backgroundColor="#00FFFF";
}
cell.innerHTML = count++;
}
}
//设置第7、8排tr
var nextMonthDate = 1;
for(var j=6;j<8;j++) {
for(var i=0;i<7;i++) {
if(count <= maxDate) {
//当前td显示的是当月日期
var cell = dwCalendarTable.rows[j].cells[i];
cell.setAttribute("dwCalendarDate", count);
cell.style.backgroundColor="Silver";
if(count==today) {
cell.style.backgroundColor="#00FFFF";
}
cell.innerHTML = count++;
}else {
//当前td显示的是次月日期
var cell = dwCalendarTable.rows[j].cells[i];
cell.setAttribute("dwCalendarDate", count + nextMonthDate -1);
cell.style.backgroundColor="Silver";
cell.innerHTML = "<font color='red'>"+ (nextMonthDate++) + "</font>";
}
}
}
//设置前一个月的日期
var preDate = new Date(pDate.getFullYear(), pDate.getMonth(), 0).getDate();//获取到上月的最大日期
var tempPreDate = preDate;
//设置第3排tr，显示前一月的日期
for(var i=day-1;i>=0;i--) {
var cell = dwCalendarTable.rows[2].cells[i];
cell.style.backgroundColor="Silver";
cell.setAttribute("dwCalendarDate", preDate - tempPreDate);
cell.innerHTML = "<font color='red'>"+ (preDate--) + "</font>";
}
//设置显示的年和月
var monthShow = document.getElementById("monthShow");
monthShow.innerHTML = months[pMonth];
var yearShow = document.getElementById("yearShow");
yearShow.innerHTML = pYear;
}
//调整月份
function addMonth(num) {
var pYear = document.getElementById("yearShow").innerHTML;
var PMonth;
var pDate;
var month = document.getElementById("monthShow").innerHTML;
var monthsIndex;
for(var i=0;i<months.length;i++) {
if(month == months[i]) {
monthsIndex = i;
}
}
PMonth = monthsIndex + num;
var pDate = new Date(pYear,PMonth,new Date().getDate());
setDate(pDate.getFullYear(), pDate.getMonth(), pDate.getDate() );
}
//调整年份
function addYear(num) {
var pYear = document.getElementById("yearShow").innerHTML;
var PMonth;
var pDate;
var month = document.getElementById("monthShow").innerHTML;
var monthsIndex;
for(var i=0;i<months.length;i++) {
if(month == months[i]) {
monthsIndex = i;
}
}
PMonth = monthsIndex;
pYear = pYear - 0 + num;
var pDate = new Date(pYear,PMonth,new Date().getDate());
setDate(pDate.getFullYear(), pDate.getMonth(), pDate.getDate() );
}
//鼠标经过td时，变背景颜色
function mouseOverColor(currentCell) {
with(currentCell) {
style.backgroundColor = "#FFCC99";
}
}
//鼠标退出td时，还原背景颜色
function mouseOutColor(currentCell) {
with(currentCell) {
if(innerHTML == today) {
//如果是日期是当天，则背景颜色和其他天数不一样
style.backgroundColor = "#00FFFF";
}else {
style.backgroundColor = "Silver";
}
}
}
//将选中的日期赋值到Input对象中
function getDate(currentCell) {
if(target.type == "text") {
var year = document.getElementById("yearShow").innerHTML;
var month = document.getElementById("monthShow").innerHTML;
var date = currentCell.getAttribute("dwCalendarDate");
for(var i=0;i<months.length;i++) {
if(month == months[i]) {
month = i;
}
}
var gDate = new Date(year,month,date);
month = gDate.getMonth() + 1;
year = gDate.getFullYear();
date = gDate.getDate();
if(month < 10) {
month = "0"+ month;
}
if(date < 10) {
date = "0"+ date;
}
dataString = year + "-" +month + "-" + date;
target.value = dataString;
var dwCalendarTable = document.getElementById("dwCalendarTable");
var dwCalenderDiv = document.getElementById("dwCalenderDiv");
dwCalendarTable.style.display = "none";
dwCalenderDiv.style.display = "none";
isShow = false;
}
}
相关阅读 更多 +
