梅花雨日历控件英文版_梅花雨控件-CSDN博客

梅花雨日历控件很好用，自己用的时候做了一点点小小的改动，一是在英文环境下似乎有问题，只好把中文都去掉，然后就是“1995年”的“年”去掉了，“一月”到“十二月”换成了“January”到“December”。

调用示例
A、html文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>InputBox Calendar</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
FONT-SIZE: 10pt; LINE-HEIGHT: 14pt; FONT-FAMILY: "MS UI Gothic", "Verdana"
}
TABLE {
FONT-SIZE: 10pt; LINE-HEIGHT: 14pt; FONT-FAMILY: "MS UI Gothic", "Verdana"
}
.ListTitle {
FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #ffffff
}
INPUT {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
}
</STYLE>

<SCRIPT language=JavaScript
src="html.control.Calendar_files/meizzDate.js"></SCRIPT>

<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY bgColor=#f4faff>
<TABLE
style="BORDER-RIGHT: #a0a0a0 1px solid; BORDER-TOP: #a0a0a0 1px solid; BORDER-LEFT: #a0a0a0 1px solid; BORDER-BOTTOM: #a0a0a0 1px solid"
cellSpacing=0 cellPadding=3 width="100%" border=0>
<TBODY>
<TR bgColor=#0080c0>
<TD class=ListTitle align=middle colSpan=3>梅花雨日历控件2.1(英文版)新鲜出炉！</TD></TR>
<TR bgColor=#d0e4f9 height=20>
<TD align=middle colSpan=3> </TD></TR>
<TR height=20>
<TD align=middle colSpan=3> </TD></TR>
<TR bgColor=#ffffff>
<TD width="5%"> </TD>
<TD align=left width="60%"><INPUT οnfοcus=setday(this)>  一般焦点用法
<P><INPUT name=txt>  <INPUT οnclick=setday(this,document.all.txt) type=button value=按钮用法>
<P><INPUT οnfοcus=setday(this) readOnly>  不能输入，只能选择 </P></TD>
<TD><A href="html.control.Calendar_files/meizzDate.js">点击这里下载js脚本</A>
</TD></TR>
<TR height=20>
<TD align=middle colSpan=3> </TD></TR>
<TR bgColor=#d0e4f9 height=20>
<TD align=middle colSpan=3> </TD></TR></TBODY></TABLE></BODY></HTML>

B、js文件
说明：日期格式我这个项目需要“mm/dd/yyyy”，就改成了这个样子。

var bMoveable=true;
var _VersionInfo="Version:2.012.01 Author: Athos;2.0 Author:walkingpoison1.0 Author: F.R.Huang(meizz)MAIL: meizz@hzcnc.com";
var strFrame;
document.writeln('<iframe id=meizzDateLayer Author=wayx frameborder=0 style="position: absolute; width: 144; height: 211; z-index: 9998; display: none"></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;}';
strFrame+='TD{FONT-SIZE: 9pt;}';
strFrame+='</style>';
strFrame+='<scr' + 'ipt>';
strFrame+='var datelayerx,datelayery; ';
strFrame+='var bDrag; ';
strFrame+='function document.onmousemove() ';
strFrame+='{if(bDrag && window.event.button==1)';
strFrame+=' {var DateLayer=parent.document.all.meizzDateLayer.style;';
strFrame+=' DateLayer.posLeft += window.event.clientX-datelayerx;';
strFrame+=' DateLayer.posTop += window.event.clientY-datelayery;}}';
strFrame+='function DragStart() ';
strFrame+='{var DateLayer=parent.document.all.meizzDateLayer.style;';
strFrame+=' datelayerx=window.event.clientX;';
strFrame+=' datelayery=window.event.clientY;';
strFrame+=' bDrag=true;}';
strFrame+='function DragEnd(){ ';
strFrame+=' bDrag=false;}';
strFrame+='</scr' + 'ipt>';
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;display: none"></span>';
strFrame+='<span id=tmpSelectMonthLayer Author=wayx style="z-index: 9999;position: absolute;top: 3; left: 48;display: none"></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 style="font-size:12px;cursor: hand;color: #ffffff" ';
strFrame+=' οnclick="parent.meizzPrevM()" title="1 Month Before" Author=meizz><b Author=meizz><</b>';
strFrame+=' </td><td width=30 align=center style="font-size:12px;cursor:default" Author=meizz ';
strFrame+='οnmοuseοver="style.backgroundColor=/'#FFD700/'" οnmοuseοut="style.backgroundColor=/'white/'" ';
strFrame+='οnclick="parent.tmpSelectYearInnerHTML(this.innerText)" title="Click to select year"><span Author=meizz id=meizzYearHead></span></td>';
strFrame+='<td width=78 align=center style="font-size:12px;cursor:default" Author=meizz οnmοuseοver="style.backgroundColor=/'#FFD700/'" ';
strFrame+=' οnmοuseοut="style.backgroundColor=/'white/'" οnclick="parent.tmpSelectMonthInnerHTML(parent.athosMonthNameToNum(this.innerText))"';
strFrame+=' title="Click to select month"><span id=meizzMonthHead Author=meizz></span></td>';
strFrame+=' <td width=16 bgcolor=#ff9900 align=center style="font-size:12px;cursor: hand;color: #ffffff" ';
strFrame+=' οnclick="parent.meizzNextM()" title="1 Month Later" Author=meizz><b Author=meizz>></b></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? 'οnmοusedοwn="DragStart()" οnmοuseup="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>';
strFrame+='<td width=18px style="font-size:12px;color:#FFFFFF" Author=meizz title="Sunday">S</td>';
strFrame+='<td width=18px style="font-size:12px;color:#FFFFFF" Author=meizz title="Monday">M</td>';
strFrame+='<td width=18px style="font-size:12px;color:#FFFFFF" Author=meizz title="Tuesday">T</td>';
strFrame+='<td width=18px style="font-size:12px;color:#FFFFFF" Author=meizz title="Wednesday">W</td>';
strFrame+='<td width=18px style="font-size:12px;color:#FFFFFF" Author=meizz title="Thursday">T</td>';
strFrame+='<td width=18px style="font-size:12px;color:#FFFFFF" Author=meizz title="Friday">F</td>';
strFrame+='<td width=20px style="font-size:12px;color:#FFFFFF" Author=meizz title="Saturday">S</td>';
strFrame+='</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 οnclick=parent.meizzDayClick(this.innerText,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 οnclick="parent.meizzDayClick(this.innerText,0)"></td>';
strFrame+=' <td colspan=3 align=right Author=meizz><span οnclick=parent.closeLayer() style="font-size:12px;cursor: hand"';
strFrame+=' Author=meizz title="' + _VersionInfo + '"><u>Close</u></span> </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 Year Before" οnclick="parent.meizzPrevY()" ';
strFrame+=' οnfοcus="this.blur()" style="font-size: 12px; height: 20px"><input Author=meizz class=button title="1 Month Before" type=button ';
strFrame+=' value="< " οnclick="parent.meizzPrevM()" οnfοcus="this.blur()" style="font-size: 12px; height: 20px"></td><td ';
strFrame+=' Author=meizz align=center><input Author=meizz type=button class=button value=Today οnclick="parent.meizzToday()" ';
strFrame+=' οnfοcus="this.blur()" title="Today" style="font-size: 12px; height: 20px; cursor:hand"></td><td ';
strFrame+=' Author=meizz align=right><input Author=meizz type=button class=button value=" >" οnclick="parent.meizzNextM()" ';
strFrame+=' οnfοcus="this.blur()" title="1 Month Later" class=button style="font-size: 12px; height: 20px"><input ';
strFrame+=' Author=meizz type=button class=button value=">>" title="1 Year Later" οnclick="parent.meizzNextY()"';
strFrame+=' οnfοcus="this.blur()" style="font-size: 12px; height: 20px"></td>';
strFrame+='</tr></table></td></tr></table></div>';

window.frames.meizzDateLayer.document.writeln(strFrame);
window.frames.meizzDateLayer.document.close();
var outObject;
var outButton;
var outDate="";
var odatelayer=window.frames.meizzDateLayer.document.all;
function setday(tt,obj)
{
if (arguments.length > 2){alert("Sorry, too many parameters");return;}
if (arguments.length == 0){alert("Sorry, none parameter!");return;}
var dads = document.all.meizzDateLayer.style;
var th = tt;
var ttop = tt.offsetTop;
var thei = tt.clientHeight;
var tleft = tt.offsetLeft;
var ttyp = tt.type;
while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
dads.top = (ttyp=="image")? ttop+thei : ttop+thei+6;
dads.left = tleft;
outObject = (arguments.length == 1) ? th : obj;
outButton = (arguments.length == 1) ? null : th;
var reg = /^(/d{1,2})//(/d{1,2})//(/d+)$/;
var r = outObject.value.match(reg);

if(r!=null){

r[0]=r[3];
r[3]=r[2];
r[2]=r[1];
r[1]=r[0];

r[2]=r[2]-1;
var d= new Date(r[1], r[2],r[3]);
if(d.getFullYear()==r[1] && d.getMonth()==r[2] && d.getDate()==r[3]){
outDate=d;
}
else outDate="";
meizzSetDay(r[1],r[2]+1);
}
else{
outDate="";
meizzSetDay(new Date().getFullYear(), new Date().getMonth() + 1);
}
dads.display = '';

event.returnValue=false;
}

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()
{
with(window.event)
{ if (srcElement.getAttribute("Author")==null && srcElement != outObject && srcElement != outButton)
closeLayer();
}
}

function document.onkeyup()
{
if (window.event.keyCode==27){
if(outObject)outObject.blur();
closeLayer();
}
else if(document.activeElement)
if(document.activeElement.getAttribute("Author")==null && document.activeElement != outObject && document.activeElement != outButton)
{
closeLayer();
}
}

function meizzWriteHead(yy,mm)
{
odatelayer.meizzYearHead.innerText = String(yy);
odatelayer.meizzMonthHead.innerText = athosMonthNumToName(String(mm));
}

function athosMonthNameToNum(mn)
{
switch (String(mn))
{
case "January" :
return String(1);
case "Feburary" :
return String(2);
case "March" :
return String(3);
case "April" :
return String(4);
case "May" :
return String(5);
case "June" :
return String(6);
case "July" :
return String(7);
case "August" :
return String(8);
case "September" :
return String(9);
case "October" :
return String(10);
case "November" :
return String(11);
case "December" :
return String(12);
default :
return String(0);
}
}

function athosMonthNumToName(mm)
{
switch (mm)
{
case "1":
return String("January");
case "2":
return String("Feburary");
case "3":
return String("March");
case "4":
return String("April");
case "5":
return String("May");
case "6":
return String("June");
case "7":
return String("July");
case "8":
return String("August");
case "9":
return String("September");
case "10":
return String("October");
case "11":
return String("November");
case "12":
return String("December");
default :
return String("UnknownMonth");
}
}