一个基于JS的日期选择控件_js new mycalendar-CSDN博客

本文链接：https://blog.csdn.net/heroying/article/details/1842141

Calendar_HY.js

/* @version 2.0.2007.06.14 */

/* @version 1.0.2004.06.13 */

/* @auther alin */

/* Email:caoailin111@sohu.com */

/* @version 2.0.2007.06.14 */

/* @auther heroying */

/* Email:heroying@gmail.com */

/* 控件使用方法：

1. 页头加入代码：<script language='javascript' src="./Calendar_HY.js" /> （此处假设页面与本文件在同一目录，否者请自行修改引用路径。）

2. 触发控件中加入ONCLICK事件：οnclick="showDiv2(this)"

如已存在ONCLICK事件则只要在调用的函数里直接调用 showDiv2(this); 即可。

var myC_x,myC_y;

var myC_timeset = null ,myC_timeset1 = null ;

var divObj = null ;

var inputName;

// 所要填充的文本框对象全局变量。add by heroying 20070612

var setObjectName;

// 全局变量：父控件的X值和Y值

var gp_otop = 0 ;

var gp_oleft = 0 ;

// 初始化日历

var myCalendar = new myCalendar;

myCalendar.show();

myCalendar.input( " txt1 " );

// showDiv2(this)

function myCalendar() // 构建对象

{

var myDate = new Date();

this.year = myDate.getFullYear();

this.month = myDate.getMonth()+1;

this.date = myDate.getDate();

this.format="yyyy-mm-dd";

this.style = myStyle(1);　

this.show = createCalendar;

this.input = createInput;

}

function myStyle(num) // 设置样式

{

if(!num||isNaN(num)){alert('参数不对,采用默认样式！');num=1;}

var style = new Array();

style[1]=".week{background-color:#DfDfff;font-size:12px;width:180px;}"

+".ds{width:180px;background-color:#f4f4f4;font-size:12px;cursor:hand}"

+".mover{border:1px solid #909EFF;background-color:#ffffff;}"

+".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}"

+".tit{background-color:#909EFF;width:180px;font-size:12px;color:white;cursor:default}"

+".cs{position:absolute;border:1px solid #909eff;width:182px;left:0px;top:0px;z-index:9999;}"

+".shadow{position:absolute;left:0px;top:0px;font-family: Arial Black;font-size:50px;color:#d4d4d4;z-index:1;text-align:center;}";

document.write("<style type='text/css'>");

document.write(style[num]);

document.write("</style>");

}

function createCalendar()

{

var week = new Array('日','一','二','三','四','五','六');

document.write("<div class='cs' onselectstart='return false' οncοntextmenu='return false' οnmοusedοwn='if(event.button==2)this.style.display="none"' id='myC_div'><div class='shadow'></div><div style='position:absolute;left:0px;top:0px;z-index:1'>");

//创建头部

//增加“清楚内容”、“关闭窗口” 2个按钮。

document.write("<table class='tit' id='myC_Top' οnmοusedοwn='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' οnmοuseup='releaseCapture();' οnmοusemοve='myCMove(this.parentElement.parentElement);'><tr><td width=10 οnmοuseοver='this.style.color="black"' οnmοuseοut='this.style.color=""' οnclick='cutYear()' style='font-family: Webdings;cursor:hand;' title='上一年份'>7</td><td title='上一月份' οnmοuseοver='this.style.color="black"' οnclick='cutMonth()' οnmοuseοut='this.style.color=""' width=10 style='font-family: Webdings;cursor:hand;'>3</td><td align=center οnmοuseοver=this.className='move1'; οnmοuseοut=this.className='';divHidden(myC.parentElement.nextSibling); οnclick='createyear("+this.year+",this);divShow(myC.parentElement.nextSibling);'></td><td align=center οnclick='createmonth("+this.month+",this);divShow(myC.parentElement.nextSibling)' οnmοuseοver=this.className='move1'; οnmοuseοut=this.className='';divHidden(myC.parentElement.nextSibling);></td><td width=10 οnmοuseοver='this.style.color="black"' οnmοuseοut='this.style.color=""' οnclick='addMonth()' style='font-family: Webdings;cursor:hand;' title='下一月份'>4</td><td width=10 style='font-family: Webdings;cursor:hand;' οnmοuseοver='this.style.color="black"' οnmοuseοut='this.style.color=""' οnclick='addYear()' title='下一年份'>8</td><td style='font-family: Webdings;cursor:hand;' οnmοuseοver='this.style.color="red"' οnmοuseοut='this.style.color=""' οnclick='if(this.innerText!="")getValue(inputName,0);myC_div.style.display="none"' title='清除内容' >y</td><td style='font-family: Webdings;cursor:hand;' οnmοuseοver='this.style.color="red"' οnmοuseοut='this.style.color=""' οnclick='closeDiv()' title='关闭' >r</td></tr></table>");

//创建星期条目

//修改星期条目支持拖动功能，并加入鼠标变为MOVE型效果。 modify by heroying 20070614

document.write("<table class='week' style='cursor:move' id='myC_WeekTop' οnmοusedοwn='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' οnmοuseup='releaseCapture();' οnmοusemοve='myCMove(this.parentElement.parentElement);'><tr>");

for(i=0;i<7;i++)

document.write("<td align=center >"+week[i]+"</td>");

document.write("</tr></table>");

//创建日期条目

document.write("<table class='ds' id='myC' cellspacing=2 cellpadding=0>");

for(i=0;i<6;i++)

{

document.write("<tr>");

for(j=0;j<7;j++)

document.write("<td width=10% height=16 align=center οnmοuseοver='mOver(this)' οnmοuseοut='mOut(this)' οnclick='if(this.innerText!="")getValue(inputName,this.innerText);myC_div.style.display="none"'></td>");

document.write("</tr>");

}

document.write("</table>");

//建建水印

document.write("</div>");

//创建选择图层

document.write("<div style='position:absolute;left:0px;top:0px;z-index:3' οnmοuseοver=divShow(this) οnmοuseοut=divHidden(this)></div>");

document.write("</div>");

//显示日期

showDate(this.year,this.month);

myC_div.style.display='none';

}

// add by heroying 20070613

function closeDiv() {

myC_div.style.display='none';

}

// 修改了返回格式为:20070101 modify by heroying 20070614

function getValue(obj,value)

{

if(value==0){

eval(setObjectName).value="";

}else{

var get_month = parseInt(myC_Top.cells[3].innerText);

var get_day = value;

get_month = get_month<10?"0"+get_month:get_month;

get_day = get_day<10?"0"+get_day:get_day;

//返回格式：20070101

eval(setObjectName).value = parseInt(myC_Top.cells[2].innerText)+""+get_month+get_day;

//返回格式：2007-1-1

//eval(setObjectName).value=parseInt(myC_Top.cells[2].innerText)+"-"+parseInt(myC_Top.cells[3].innerText)+"-"+value;

//重新显示时显示年份、月份更新为当前系统日期信息。add by heroying 20070612

var today = new Date();

myC_Top.cells[2].innerText = today.getYear()+"年";

myC_Top.cells[3].innerText = (today.getMonth()+1)+"月";

showDate(today.getYear(),today.getMonth()+1);

}

function showDate(year,month)

{

var myDate = new Date(year,month-1,1);

var today = new Date();

var day = myDate.getDay();

var length = new Array(31,30,31,30,31,30,31,31,30,31,30,31);

length[1] = ((year%4==0)&&(year%100!=0)||(year%400==0))?29:28;

for(i=0;i<myC.cells.length;i++)myC.cells[i].innerHTML = "";

for(i=0;i<length[month-1];i++)

{

myC.cells[i+day].innerHTML = (i+1);

if(new Date(year,month-1,i+1).getDay()==6||new Date(year,month-1,i+1).getDay()==0){myC.cells[i+day].style.color='red';}

else{myC.cells[i+day].style.color='#000000'}

//增加当前日期颜色变化（绿色） add by heroying 20070612

if(year==today.getYear()&&month==today.getMonth()+1){

if(new Date(year,month-1,i+1).getDate()==today.getDate()){myC.cells[i+day].style.color='green';}

}

myC_Top.cells[2].innerText=year+"年";

myC_Top.cells[3].innerText=month+"月";

with(myC.parentNode.previousSibling.style)

{

pixelLeft=myC.offsetLeft;

pixelTop=myC.offsetTop;

height = myC.clientHeight;

width = myC.clientWidth;

}

myC.parentElement.parentElement.style.height=myC.parentElement.offsetHeight;

myC.parentElement.previousSibling.innerHTML=year;

}

// 一些附加函数--------------------

// ---------Begin-------------------

function mOver(obj) {obj.className = 'mover';}

function mOut(obj) {if(obj.className=='mover')obj.className = '';}

function addYear() {var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText); year++;showDate(year,month);}

function addMonth() {var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month++;if(month>12){month=1;year++;}showDate(year,month);}

function cutYear() {var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);year--;showDate(year,month);}

function cutMonth() {var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month--;if(month<1){month=12;year--;}showDate(year,month);}

function divS(obj)

{

if(obj!=divObj)

{

obj.style.backgroundColor="#909eff";

obj.style.color='black';

}

if(divObj!=null)

{

divObj.style.backgroundColor='';

divObj.style.color='';

}

divObj = obj;

}

function divShow(obj)

{

if (myC_timeset!=null) clearTimeout(myC_timeset);

obj.style.display='block';

}

function divHidden(obj) {myC_timeset=window.setTimeout(function(){obj.style.display='none'},500);}

function createyear(year,obj) // 创建年份选择

{

var ystr;

var oDiv;

ystr="<table class='move1' cellspacing=0 cellpadding=2 width="+obj.offsetWidth+">";

ystr+="<tr><td style='cursor:hand' οnclick='createyear("+(year-20)+",myC_Top.cells[2])' align=center>上翻</td></tr>";

for(i=year-10;i<year+10;i++)

if(year==i)

ystr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center οnclick='myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=""'>"+i+"年</td></tr>";

else

ystr+="<tr><td align=center style='cursor:hand' οnmοuseοver=divS(this) οnclick='myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=""'>"+i+"年</td></tr>";

ystr+="<tr><td style='cursor:hand' οnclick='createyear("+(year+20)+",myC_Top.cells[2])' align=center>下翻</td></tr>";

ystr+="</table>";

oDiv = myC.parentElement.nextSibling;

oDiv.innerHTML='';

oDiv.innerHTML = ystr;

showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);

}

function createmonth(month,obj) // 创建月份选择

{

var mstr;

var oDiv;

mstr="<table class='move1' cellspacing=0 cellpadding=2 width="+(obj.offsetWidth+5)+">";

for(i=1;i<13;i++)

if (month==i)

mstr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center οnclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=""'>"+i+"月</td></tr>";

else

mstr+="<tr><td align=center style='cursor:hand' οnmοuseοver='divS(this)' οnclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=""'>"+i+"月</td></tr>";

mstr+="</table>";

oDiv = myC.parentElement.nextSibling;

oDiv.innerHTML='';

oDiv.innerHTML = mstr;

showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);

}

function showDiv(obj,top,left)

{

obj.style.pixelTop=top;

obj.style.pixelLeft=left;

}

function myCMove(obj)