javascript时间控件-梅花雨版

来源：互联网发布：图标设计的软件编辑：程序博客网时间：2024/04/28 03:48

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
<!--
//----------------------------------------------------------------------------
// emu 现在把它改为IE/NS通用的了，但还没有进行充分测试。IE5,NS6.2下通过。
// walkingpoison说在ns7下面显示混乱，可惜emu的电脑丢了，没有办法在ns7下面继续调它了，有兴趣的朋友继续努力……
// stonelf@msn.com

//----------------------------------------------------------------------------
// 这是梅花雨做的一个日历 Javascript 页面脚本控件，适用于微软的 IE （5.0以上）浏览器
// 主调用函数是 setday(this,[object])和setday(this)，[object]是控件输出的控件名，举两个例子：
// 一、<input name=txt><input type=button value=setday onclick="setday(this,document.all.txt)">
// 二、<input onfocus="setday(this)">
// 若有什么不足的地方，或者您有更好的建议，请与我联系：mail: meizz@hzcnc.com
// 本日历的年份限制是（1000 - 9999）
// 按ESC键关闭该控件
// 在年和月的显示地方点击时会分别出年与月的下拉框
// 控件外任意点击一点即可关闭该控件
/* 以下为walkingpoison的修改说明
walkingpoison联系方式：wayx@kali.com.cn

Ver 2.0
修改日期：2002-12-13
修改内容：
1.*全新修改使用iframe作为日历的载体，不再被select和flash等控件挡住。
2.修正了移植到iframe后移动日历控件的问题。

Ver 1.5
修改日期：2002-12-4
修改内容：
1.选中的日期显示为凹下去的样式
2.修改了关闭层的方法，使得失去焦点的时候能够关闭日历。
3.修改按键处理，使得Tab切换焦点的时候可以关闭控件
4.*可以自定义日历是否可以拖动

Ver 1.4
修改日期：2002-12-3
修改内容：
1.修正选中年/月份下拉框后按Esc键导致年/月份不显示的问题
2.修正使用下拉框选择月份造成的日期错误（字符串转化为数字的问题）
3.*外观样式的改进，使得控件从丑小鸭变成了美丽的天鹅，从灰姑娘变成了高贵的公主，从……（读者可以自己进行恰当的比喻）
4.再次增大年/月份的点击空间，并对下拉框的位置稍作调整

注：*号表示比较关键的改动

说明：
1.受到iframe的限制，如果拖动出日历窗口，则日历会停止移动。
*/
//==================================================== 参数设定部分 =======================================================
var bMoveable=true; //设置日历是否可以拖动
var _VersionInfo="Version:2.0 2.0作者:walkingpoison 1.0作者: F.R.Huang(meizz) MAIL: meizz@hzcnc.com" //版本信息

//==================================================== WEB 页面显示部分 =====================================================
var strFrame;                //存放日历层的HTML代码
document.writeln('<iframe name=meizzDateLayer Author=wayx frameborder=0 style="position: absolute; width: 144; height: 211; z-index: 9998; visibility:hidden"></iframe>');
strFrame='<style>';
strFrame+='INPUT.button{BORDER-RIGHT: #ff9900 1px solid;BORDER-TOP: #ff9900 1px solid;BORDER-LEFT: #ff9900 1px solid;';
strFrame+='BORDER-BOTTOM: #ff9900 1px solid;BACKGROUND-COLOR: #fff8ec;font-family:宋体;}';
strFrame+='TD{FONT-SIZE: 9pt;font-family:宋体;}';
strFrame+='A{text-decoration:none;font-weight:bold;color:black}';
strFrame+='</style>';
strFrame+='<scr' + 'ipt>';
strFrame+='var datelayerx,datelayery;        /*存放日历控件的鼠标位置*/';
strFrame+='var bDrag;        /*标记是否开始拖动*/';
strFrame+='function document_onmousemove(e){/*在鼠标移动事件中，如果开始拖动日历，则移动日历*/';
strFrame+='if(bDrag){';
strFrame+='        var DateLayer=parent.document.getElementsByName("meizzDateLayer")[0].style;';
strFrame+='                DateLayer.left = parseInt(DateLayer.left)+ e.clientX-datelayerx; /*由于每次移动以后鼠标位置都恢复为初始的位置，因此写法与div中不同*/';
strFrame+='if(DateLayer.top=="")DateLayer.top=0;';
strFrame+='                DateLayer.top = parseInt(DateLayer.top)+ e.clientY-datelayery;}}';
strFrame+='function DragStart(e){                /*开始日历拖动*/';
strFrame+="if ((document.all?e.button:e.which)!=1) return;/n";
strFrame+='var DateLayer=parent.document.getElementsByName("meizzDateLayer")[0].style;';
strFrame+='        datelayerx=e.clientX;';
strFrame+='        datelayery=e.clientY;';
strFrame+='        bDrag=true;}';
strFrame+='function DragEnd(){                /*结束日历拖动*/';
strFrame+='        bDrag=false;}';
strFrame+='</scr' + 'ipt>';
strFrame+='<body onmousemove="document_onmousemove(event)">';
strFrame+='<div style="z-index:9999;position: absolute; left:0; top:0;" onselectstart="return false"><span id=tmpSelectYearLayer Author=wayx style="z-index: 9999;position: absolute;top: 3; left: 19;visibility: hidden"></span>';
strFrame+='<span id=tmpSelectMonthLayer Author=wayx style="z-index: 9999;position: absolute;top: 3; left: 78;visibility: hidden"></span>';
strFrame+='<table border=1 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#ff9900 bgcolor=#ff9900 Author="wayx">';
strFrame+=' <tr Author="wayx"><td width=142 height=23 Author="wayx" bgcolor=#FFFFFF><table border=0 cellspacing=1 cellpadding=0 width=140 Author="wayx" height=23>';
strFrame+=' <tr align=center Author="wayx"><td width=16 align=center bgcolor=#ff9900';
strFrame+=' onclick="parent.meizzPrevM()" title="向前翻 1 月" Author=meizz><a href="javascript:;" style="font-size:12px;color: #ffffff" Author=meizz><</a>';
strFrame+='        </td><td width=60 align=center style="font-size:12px;cursor:default" Author=meizz ';
strFrame+='onmouseover="style.backgroundColor=/'#FFD700/'" onmouseout="style.backgroundColor=/'white/'" ';
strFrame+='onclick="parent.tmpSelectYearInnerHTML(innerHTML.match(///d{4}/).toString());" title="点击这里选择年份"><span Author=meizz id=meizzYearHead></span></td>';
strFrame+='<td width=48 align=center style="font-size:12px;cursor:default" Author=meizz onmouseover="style.backgroundColor=/'#FFD700/'" ';
strFrame+=' onmouseout="style.backgroundColor=/'white/'" onclick="parent.tmpSelectMonthInnerHTML(innerHTML.match(///d//d?/).toString())"';
strFrame+='        title="点击这里选择月份"><span id=meizzMonthHead Author=meizz></span></td>';
strFrame+='        <td width=16 bgcolor=#ff9900 align=center style="font-size:12px;cursor: hand;color: #ffffff" ';
strFrame+=' onclick="parent.meizzNextM()" title="向后翻 1 月" Author=meizz><a href="javascript:;" style="font-size:12px;color: #ffffff;font:bold" Author=meizz>></a></td></tr>';
strFrame+='    </table></td></tr>';
strFrame+=' <tr Author="wayx"><td width=142 height=18 Author="wayx">';
strFrame+='<table border=1 cellspacing=0 cellpadding=0 bgcolor=#ff9900 ' + (bMoveable? 'onmousedown="DragStart(event)" onmouseup="DragEnd()"':'');
strFrame+=' BORDERCOLORLIGHT=#FF9900 BORDERCOLORDARK=#FFFFFF width=140 height=20 Author="wayx" style="cursor:' + (bMoveable ? 'move':'default') + '">';
strFrame+='<tr Author="wayx" align=center valign=bottom><td style="font-size:12px;color:#FFFFFF" Author=meizz>日</td>';
strFrame+='<td style="font-size:12px;color:#FFFFFF" Author=meizz>一</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>二</td>';
strFrame+='<td style="font-size:12px;color:#FFFFFF" Author=meizz>三</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>四</td>';
strFrame+='<td style="font-size:12px;color:#FFFFFF" Author=meizz>五</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>六</td></tr>';
strFrame+='</table></td></tr>';
strFrame+=' <tr Author="wayx"><td width=142 height=120 Author="wayx">';
strFrame+='    <table border=1 cellspacing=2 cellpadding=0 BORDERCOLORLIGHT=#FF9900 BORDERCOLORDARK=#FFFFFF bgcolor=#fff8ec width=140 height=120 Author="wayx">';
var n=0; for (j=0;j<5;j++){ strFrame+= ' <tr align=center Author="wayx">'; for (i=0;i<7;i++){
strFrame+='<td width=20 height=20 id=meizzDay'+n+' style="font-size:12px" Author=meizz onclick=parent.meizzDayClick(this.innerHTML.match(///d+/).toString(),0)></td>';n++;}
strFrame+='</tr>';}
strFrame+='      <tr align=center Author="wayx">';
for (i=35;i<39;i++)strFrame+='<td width=20 height=20 id=meizzDay'+i+' style="font-size:12px" Author=wayx onclick="parent.meizzDayClick(this.innerHTML.match(///d+/).toString(),0)"></td>';
strFrame+='        <td colspan=3 align=right Author=meizz><a href="javascript:;" onclick=parent.closeLayer() style="font-size:12px;text-decoration:underline;font-weight:300;"';
strFrame+='         Author=meizz title="' + _VersionInfo + '">关闭</a> </td></tr>';
strFrame+='    </table></td></tr><tr Author="wayx"><td Author="wayx">';
strFrame+='        <table border=0 cellspacing=1 cellpadding=0 width=100% Author="wayx" bgcolor=#FFFFFF>';
strFrame+='          <tr Author="wayx"><td Author=meizz align=left><input Author=meizz type=button class=button value="<<" title="向前翻 1 年" onclick="parent.meizzPrevY()" ';
strFrame+='             onfocus="this.blur()" style="font-size: 12px; height: 20px"><input Author=meizz class=button title="向前翻 1 月" type=button ';
strFrame+='             value="< " onclick="parent.meizzPrevM()" onfocus="this.blur()" style="font-size: 12px; height: 20px"></td><td ';
strFrame+='             Author=meizz align=center><input Author=meizz type=button class=button value=Today onclick="parent.meizzToday()" ';
strFrame+='             onfocus="this.blur()" title="当前日期" style="font-size: 12px; height: 20px; cursor:hand"></td><td ';
strFrame+='             Author=meizz align=right><input Author=meizz type=button class=button value=" >" onclick="parent.meizzNextM()" ';
strFrame+='             onfocus="this.blur()" title="向后翻 1 月" class=button style="font-size: 12px; height: 20px"><input ';
strFrame+='             Author=meizz type=button class=button value=">>" title="向后翻 1 年" onclick="parent.meizzNextY()"';
strFrame+='             onfocus="this.blur()" style="font-size: 12px; height: 20px"></td>';
strFrame+='</tr></table></td></tr></table></div></body>';
var odatelayer;
var outObject;
var outButton;                //点击的按钮
var outDate="";                //存放对象的日期
function init(){
        window.frames.meizzDateLayer.document.writeln(strFrame);
        window.frames.meizzDateLayer.document.close();                //解决ie进度条不结束的问题
        odatelayer=window.frames.meizzDateLayer.document;                //存放日历对象
}
//==================================================== WEB 页面显示部分 ======================================================

var MonHead = new Array(12);                       //定义阳历中每个月的最大天数
    MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4] = 31; MonHead[5] = 30;
    MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;

var meizzTheYear=new Date().getFullYear(); //定义年的变量的初始值
var meizzTheMonth=new Date().getMonth()+1; //定义月的变量的初始值
var meizzWDay=new Array(39); //定义写日期的数组

function document_onclick(e) //任意点击时关闭该控件        //ie6的情况可以由下面的切换焦点处理代替
{
        var elm = (document.all)?(e.srcElement):(e.target);
        if ((elm.getAttribute("Author")==null || elm.getAttribute("Author")=="") && elm != outObject && elm != outButton)
    closeLayer();
}

function meizzWriteHead(yy,mm) //往 head 中写入当前的年与月
{
odatelayer.getElementById("meizzYearHead").innerHTML = yy + " 年";
odatelayer.getElementById("meizzMonthHead").innerHTML = mm + " 月";
}

}

function closeLayer() //这个层的关闭
{
document.getElementsByName("meizzDateLayer")[0].style.visibility="hidden";
}

function IsPinYear(year) //判断是否闰平年
{
if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;
}

function GetMonthCount(year,month) //闰年二月为29天
{
    var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;
}
function GetDOW(day,month,year)     //求某天的星期几
{
    var dt=new Date(year,month-1,day).getDay()/7; return dt;
}

// -->
</script>
</HEAD>

<BODY onclick="document_onclick(event)" onkeyup="document_onkeyup(event)" onload="init()">
一、<input name=txt><input type=button value=setday onclick="setday(this,document.getElementsByName('txt')[0])"><br>
二、<input onfocus="setday(this)"> <br>
<SELECT NAME="">
<option value="">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value="">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value="">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value="">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>

</SELECT>
</BODY>
</HTML>