我要投稿
  • 您当前的位置:57365.com -> 技术教程 -> 网站建设教程 -> 源码精华 -> 教程内容
  • [ 收藏本页教程 ]
  • 常用日历输入框(JS版)源码精华教程

    教程作者:佚名    教程来源:不详   教程栏目:源码精华    收藏本页
    感谢作者 meizz@hzcnc.com

    JS部分:
    <textarea class="yk9" style="WIDTH: 559px; HEIGHT: 198px" name="source" rows="12" cols="63">
    <!--
    //----------------------------------------------------------------------------
    // 这是我做的一个日历 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

    1.修正选择月份后下一月的提示内容错误

    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.再次增大年/月份的点击空间,并对下拉框的位置稍作调整

    Ver 1.3
    修改日期:2002-11-29
    修改内容:
    1.*空白部分用灰色显示上个月的最后几天和下个月的前几天
    2.*每个日期上面加上鼠标提示
    3.修改使得当前日期和当前选择的日期的背景色在灰色日期部分也能正常显示

    Ver 1.2
    修改日期:2002-11-28
    修改内容:
    1.*修改年和月的点击都把中文包含在内,增大点击的空间
    2.当前选择的日期在列表中显示不同的背景色
    3.修正了点击单元格之间的分隔线导致控件关闭的问题

    Ver 1.1
    修改日期:2002-11-15
    修改内容:
    1.修正了方法二按Esc键关闭以后再次点击不会显示日历的问题
    2.点击today直接选中当前的日期并关闭控件
    3.*如果调用控件的输入框含有合法日期,则自动显示输入框的日期部分。
    4.修改程序统一使用关闭的函数closeLayer()来关闭日历控件,这样可以通过自定义关闭函数来完成用户自定义的功能。

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

    本控件还需要改进的部分:
    1.受到iframe的限制,如果拖动出日历窗口,则日历会停止移动。
    */

    //==================================================== 参数设定部分 =======================================================
    var bMoveable=true; //设置日历是否可以拖动
    var _VersionInfo="Version:2.0&#13;2.0作者:walkingpoison&#13;1.0作者: F.R.Huang(meizz)&#13;MAIL: meizz@hzcnc.com" //版本信息

    //==================================================== WEB 页面显示部分 =====================================================
    var strFrame; //存放日历层的HTML代码
    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;font-family:宋体;}';
    strFrame+='TD{FONT-SIZE: 9pt;font-family:宋体;}';
    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;/*由于每次移动以后鼠标位置都恢复为初始的位置,因此写法与div中不同*/';
    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: 78;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+=' onclick="parent.meizzPrevM()" title="向前翻 1 月" Author=meizz><b Author=meizz>&lt;</b>';
    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(this.innerText.substring(0,4))" 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(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';
    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><b Author=meizz>&gt;</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? 'onmousedown="DragStart()" onmouseup="DragEnd()"':'');
    strFrame+=' BORDERCOLORLIGHT=#FF9900 BORDERCOLORDARK=#FFFFFF width=140 height=20 Author="wayx" style="cursor:' + (bMoveable ? '
    我要投稿   -   广告合作   -   关于本站   -   友情连接   -   网站地图   -   联系我们   -   版权声明   -   设为首页   -   加入收藏   -   网站留言
    Copyright © 2009 - 20012 www.www.hxswjs.com All Rights Reserved.57365.com 版权所有