一个基于JS的日期选择控件

翻译|其它|编辑:郝浩|2007-10-25 09:43:09.000|阅读 3668 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

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" /> (此处假设页面与本文件在同一目录,否者请自行修改引用路径。)                                
            <script language='javascript'></script>
        2. 触发控件中加入 ONCLICK 事件:onclick="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' oncontextmenu='return false' onmousedown='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' onmousedown='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' onmouseup='releaseCapture();' onmousemove='myCMove(this.parentElement.parentElement);'><tr><td width=10 onmouseover='this.style.color="black"' onmouseout='this.style.color=""' onclick='cutYear()' style='font-family: Webdings;cursor:hand;' title='上一年份'>7</td><td title='上一月份' onmouseover='this.style.color="black"' onclick='cutMonth()' onmouseout='this.style.color=""' width=10 style='font-family: Webdings;cursor:hand;'>3</td><td align=center onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling); onclick='createyear("+this.year+",this);divShow(myC.parentElement.nextSibling);'></td><td align=center onclick='createmonth("+this.month+",this);divShow(myC.parentElement.nextSibling)' onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling);></td><td width=10 onmouseover='this.style.color="black"' onmouseout='this.style.color=""' onclick='addMonth()' style='font-family: Webdings;cursor:hand;' title='下一月份'>4</td><td width=10 style='font-family: Webdings;cursor:hand;' onmouseover='this.style.color="black"' onmouseout='this.style.color=""' onclick='addYear()' title='下一年份'>8</td><td style='font-family: Webdings;cursor:hand;'  onmouseover='this.style.color="red"' onmouseout='this.style.color=""' onclick='if(this.innerText!="")getValue(inputName,0);myC_div.style.display="none"' title='清除内容' >y</td><td style='font-family: Webdings;cursor:hand;'  onmouseover='this.style.color="red"' onmouseout='this.style.color=""' onclick='closeDiv()' title='关闭' >r</td></tr></table>");
        
//创建星期条目

        //修改星期条目支持拖动功能,并加入鼠标变为 MOVE 型效果。 modify by heroying 20070614
        document.write("<table class='week' style='cursor:move' id='myC_WeekTop' onmousedown='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' onmouseup='releaseCapture();' onmousemove='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 onmouseover='mOver(this)' onmouseout='mOut(this)' onclick='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' onmouseover=divShow(this) onmouseout=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' onclick='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 onclick='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' onmouseover=divS(this) onclick='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' onclick='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 onclick='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' onmouseover='divS(this)' onclick='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)
{
        
if(event.button==1)
{
                
var X =
 obj.clientLeft;
                
var Y =
 obj.clientTop;
                obj.style.pixelLeft
= X+(event.x-
myC_x);
                obj.style.pixelTop
= Y+(event.y-
myC_y);
                window.status
=
myC_y;
        }

}


//对原来不能准确定位DIV初始位置进行修正。modify by heroying 20070614
function showDiv2(obj)
{
        setObjectName 
=
 obj;
        inputName
=
obj.name;
        
var e=
obj;
        
//每次统计父控件X、Y值前先清空历史数据。

        gp_otop = 0;
        gp_oleft 
= 0
;
        
//递归统计父控件X、Y值

        GetParent(e);
        
//加上当前控件X、Y值

        myC_div.style.pixelTop = gp_otop+setObjectName.offsetHeight+setObjectName.offsetTop;
        myC_div.style.pixelLeft 
= gp_oleft+
setObjectName.offsetLeft;
        
        myC_div.style.display
="block"
;
}


//递归查找父控件,并累计父控件的X值和Y值.add by heroying 20070614
function GetParent(obj)
{
      
if(obj.offsetParent!=undefined)
{
              gp_otop 
+= obj.offsetParent.offsetTop;//累加y值

                gp_oleft += obj.offsetParent.offsetLeft;//累加x值
                GetParent(obj.offsetParent);//递归查找
        }
else{
                
return
;
        }

}


function createInput(name){
        myC_div.style.display
='none'
;
        document.write(
"<input type='hidden' name='Calendar_HY_init'>"
);
}


// --------------End ---------------------

 一个页面范例 test.html

<html>
<head>
    
<script src='./Calendar_HY.js'></script>
<script>
var myCalendar=new myCalendar;
//myCalendar.year=2006;

myCalendar.show();
myCalendar.input(
"txt1"
);
</script>
</head>
<body >
<input type="text" name="test"  onclick="showDiv2(this)"   readonly=true>
<input type="text" name="test1" onclick="showDiv2(this)"  readonly=true>
<input type="text" name="test2" onclick="showDiv2(this)"  readonly=true>
<input type="text" name="test3" onfocus="showDiv2(this)"  readonly=true>
<input type="text" name="test4" onfocus="showDiv2(this)"  readonly=true>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input type="text" name="bbbb" >
</body>
<html>


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:csdn

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP