网站学习网--Javascript脚本日历输入控件升级了

登录名：密码：验证码： 4268

设为首页收藏本站联系站长

2009年1月7日

农历戊子年(鼠)
腊月十二

特别推荐：产品报价漂亮网站网址图片素材

我要查找:

欢迎您来这里。每天学一点,每天进步一点!

当前位置：首页 >> HTML学习 >> javascript学习

Javascript脚本日历输入控件升级了

来源：发表日期：2008年1月31日作者：


编辑：admin 级别：司令浏览次数:72	【大中小】

问：
头些日子我写了一个的JavaScript日历输入控件，写得不太好，现在我修改了其中的一些代码，也增加了一些功能，还望大家多多指正！
该控件适用于IE 5.0以上的浏览器.用法很简单：

或者

setday.js 内容见下：
______________________________________________________________________________________________
答1：
<!--
//----------------------------------------------------------------------------

// 这是我做的一个日历 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键关闭该控件
// 在年和月的显示地方点击时会分别出年与月的下拉框
// 控件外任意点击一点即可关闭该控件

//==================================================== WEB 页面显示部分 =====================================================
document.writeln('<div id=meizzDateLayer style="position: absolute; width: 142; height: 166; z-index: 9998; display: none">');
document.writeln('<span id=tmpSelectYearLayer style="z-index: 9999;position: absolute;top: 2; left: 18;display: none"></span>');
document.writeln('<span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 2; left: 75;display: none"></span>');
document.writeln('<table border=0 cellspacing=1 cellpadding=0 width=142 height=160 bgcolor=#808080 onselectstart="return false">');
document.writeln(' <tr><td width=142 height=23 bgcolor=#FFFFFF><table border=0 cellspacing=1 cellpadding=0 width=140 height=23>');
document.writeln('      <tr align=center><td width=20 align=center bgcolor=#808080 style="font-size:12px;cursor: hand;color: #FFD700" ');
document.writeln('        onclick="meizzPrevM()" title="向前翻　月" Author=meizz><b Author=meizz><<</b>');
document.writeln('        </td><td width=100 align=center style="font-size:12px;cursor:default" Author=meizz>');
document.writeln('        <span Author=meizz id=meizzYearHead onclick="tmpSelectYearInnerHTML(this.innerText)"></span> 年 <span');
document.writeln('         id=meizzMonthHead Author=meizz onclick="tmpSelectMonthInnerHTML(this.innerText)"></span> 月</td>');
document.writeln('        <td width=20 bgcolor=#808080 align=center style="font-size:12px;cursor: hand;color: #FFD700" ');
document.writeln('         onclick="meizzNextM()" title="往后翻　月" Author=meizz><b Author=meizz>>></b></td></tr>');
document.writeln('    </table></td></tr>');
document.writeln(' <tr><td width=142 height=18 bgcolor=#808080>');
document.writeln('<table border=0 cellspacing=0 cellpadding=0 width=140 height=1 style="cursor:default">');
document.writeln('<tr align=center><td style="font-size:12px;color:#FFFFFF" Author=meizz>日</td>');
document.writeln('<td style="font-size:12px;color:#FFFFFF" Author=meizz>一</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>二</td>');
document.writeln('<td style="font-size:12px;color:#FFFFFF" Author=meizz>三</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>四</td>');
document.writeln('<td style="font-size:12px;color:#FFFFFF" Author=meizz>五</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>六</td></tr>');
document.writeln('</table></td></tr>');
document.writeln(' <tr><td width=142 height=120>');
document.writeln('    <table border=0 cellspacing=1 cellpadding=0 width=140 height=120 bgcolor=#FFFFFF>');
var n=0; for (j=0;j<5;j++){ document.writeln (' <tr align=center>'); for (i=0;i<7;i++){
document.writeln('<td width=20 height=20 id=meizzDay'+n+' style="font-size:12px" Author=meizz onclick=meizzDayClick(this.innerText)></td>');n++;}
document.writeln('</tr>');}
document.writeln('      <tr align=center><td width=20 height=20 style="font-size:12px" id=meizzDay35 Author=meizz ');
document.writeln('         onclick=meizzDayClick(this.innerText)></td>');
document.writeln('        <td width=20 height=20 style="font-size:12px" id=meizzDay36 Author=meizz onclick=meizzDayClick(this.innerText)></td>');
document.writeln('        <td colspan=5 align=right Author=meizz><span onclick=closeLayer() style="font-size:12px;cursor: hand"');
document.writeln('         Author=meizz title="作者: F.R.Huang(meizz)
MAIL: meizz@hzcnc.com"><u>关闭本控件</u></span> </td></tr>');
document.writeln('    </table></td></tr><tr><td>');
document.writeln('        <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF>');
document.writeln('          <tr><td Author=meizz align=left><input Author=meizz type=button value="< " title="向前翻　年" onclick="meizzPrevY()" ');
document.writeln('             onfocus="this.blur()" style="font-size: 12px; height: 20px"><input Author=meizz title="向前翻　月" type=button ');
document.writeln('             value="<<" onclick="meizzPrevM()" onfocus="this.blur()" style="font-size: 12px; height: 20px"></td><td ');
document.writeln('             Author=meizz align=center><input Author=meizz type=button value=Today onclick="meizzToday()" ');
document.writeln('             onfocus="this.blur()" title="现在的年月" style="font-size: 12px; height: 20px"></td><td ');
document.writeln('             Author=meizz align=right><input Author=meizz type=button value=">>" onclick="meizzNextM()" ');
document.writeln('             onfocus="this.blur()" title="往后翻　月" style="font-size: 12px; height: 20px"><input ');
document.writeln('             Author=meizz type=button value=" >" title="往后翻　年" onclick="meizzNextY()"');
document.writeln('             onfocus="this.blur()" style="font-size: 12px; height: 20px"></td>');
document.writeln('</tr></table></td></tr></table></div>');
//==================================================== WEB 页面显示部分 ======================================================
______________________________________________________________________________________________
答2：

var outObject;
function setday(tt,obj) //主调函数
{
if (arguments.length > 2){alert("对不起！传入本控件的参数太多！");return;}
if (arguments.length == 0){alert("对不起！您没有传回本控件任何参数！");return;}
var dads = document.all.meizzDateLayer.style;var th = tt;
var ttop = tt.offsetTop;     //TT控件的定位点高
var thei = tt.clientHeight; //TT控件本身的高
var tleft = tt.offsetLeft;    //TT控件的定位点宽
var ttyp = tt.type;          //TT控件的类型
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;
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(37); //定义写日期的数组

function document.onclick() //任意点击时关闭该控件
{
with(window.event.srcElement)
{ if (tagName != "INPUT" && getAttribute("Author")==null)
document.all.meizzDateLayer.style.display="none";
}
}

function meizzWriteHead(yy,mm) //往 head 中写入当前的年与月
{ document.all.meizzYearHead.innerText = yy;
document.all.meizzMonthHead.innerText = mm;
}

function closeLayer() //这个层的关闭
{
document.all.meizzDateLayer.style.display="none";
}

function document.onkeydown()
{
if (window.event.keyCode==27)document.all.meizzDateLayer.style.display="none";
}

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;
}

ie5
______________________________________________________________________________________________
答4：
原来还有一帖
______________________________________________________________________________________________
答5：
用了一下，感觉蛮好

谢谢
______________________________________________________________________________________________
答6：
大家好,才是真的好.
______________________________________________________________________________________________
答7：
不知道能不能解决在select控件上很难看的问题
______________________________________________________________________________________________
答8：
如果这个输入控件在页面最下方。
那日历就看不到了

______________________________________________________________________________________________
答9：
1. 将下面的几个按钮做成平面的更加一致、协调。
2. 可以考虑增加一个返回日期格式的选项。如
setDay(this, "yyyy/mm/dd/")
setDay(this, "yy/mm/dd");
setDay(this, "mm/dd/yyyy");
setDay(this, "yyyy");
setDay(this, "mm/dd");
setDay(this, "dd");
或者其他自定义格式.
3. 日历中的字体用普通就可以了，另外前后月份的日期片断可以灰色显示在同一表格内，以便对照。
总之，还可以做的更好些，把它做成精品。
______________________________________________________________________________________________
答10：
这个也不错，强力推荐：
http://www.totallysmartit.com/examples/calendar/simple.asp

______________________________________________________________________________________________
答11：
To: Go_Rush(阿舜) 按你的这个建议,修改一下主调函数即可,详见下:

To: onestab(┼─) 你的建议很好,我下一个版本里会酌情添加进去的,先在此谢谢你了!
______________________________________________________________________________________________
答12：
To: Go_Rush(阿舜) 按你的这个建议,修改一下主调函数即可,详见下:

To: onestab(┼─) 你的建议很好,我下一个版本里会酌情添加进去的,先在此谢谢你了!
______________________________________________________________________________________________
答13：
能不能把web也面部分也铁出来啊，
就是把他整理成一个完整的web也面形式。
______________________________________________________________________________________________
答14：
按你新修改的主函数运行下面代码：
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<script language=javascript src=setday.js></script>
<input onfocus="setday(this)">
<input onfocus="setday(this)">
<input >
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

怎么那个层老是在上面呀
______________________________________________________________________________________________
答15：
学习
______________________________________________________________________________________________
答16：
我想知道为什么我把这些代码拷到QQ或者dreamwaver里面所有的中文字会变成问号?
______________________________________________________________________________________________
答17：
厉害，厉害
______________________________________________________________________________________________
答18：
谁有scriptlet版的？要求默然值是xxxxx.xxxx的时间格式。？
______________________________________________________________________________________________
答19：
希望能够在到达页面边界时，自动在反方向显示。

______________________________________________________________________________________________
答20：
亮点：“关闭本控件”几个字的位置放得挺有创意

似乎也有一些不足（说错了请勿笑话）：
1.覆盖了日期text输入框原有的记忆功能（通过返回前页能记住上次的值）
2.覆盖了年月选择框select的上下键的功能
3.丢掉了tab键功能
4.手输入的值和控件里的值没有联系起来：当有多个这样的日期输入时，会出现不合常人思维的现象。例如输入第一个日期20020203后，到第二个日期输入的地方，控件的默认月份为二月份（不知是否是这样的，JK没有测试过）；
5.<、<<、>、>>等使用起来不大方便
6.代码太长
______________________________________________________________________________________________
答21：
如果老总的生日是1945-07-12
用控件的话要用鼠标点三十多下才能完成.
______________________________________________________________________________________________
答22：
hehe~ 年份我看还是改成[-----] 下拉的形式, 或者输入框的形式.
否则点起来很辛苦阿......
______________________________________________________________________________________________
答23：
双击head的年或月，程序已经实现下拉选择

不过，建议使用combobox,这样用起来方便，尤其对生日选择
http://www.deadbeef.com/dhtml/combobox.htm?server=microsoft.com
______________________________________________________________________________________________
答24：
希望楼主解决我上面说的小毛病
______________________________________________________________________________________________
答25：
To:vivanboy 我正在修改代码，谢谢你的建议，修改好了之后我定当再次奉献。
______________________________________________________________________________________________
答26：
我先收藏了!说真的我现在看起来很困难了
______________________________________________________________________________________________
答27：
正在改进之中....

(编辑:网站学习网)

·上一篇文章：请问window.open能不能带target参

·下一篇文章： window.open最大化的问题

该篇文章的评论

暂无相关评论

· 怎么将checkbox, radio,

· js如何打开doc文件