日历弹窗的例子 阴

jed , 2006-12-7 17:17 , 代码编程 , 评论(3) , 阅读(9896) , Via 本站原创 | |
在编程序的过程中,通常遇到这样的情况,要求用户输入日期,结果,他们输入的不规范,导致程序结果最后出现错误,今天,我从网上,搜了一下,找了相应的代码。效果不错,与大家分享一下。
先看看演示吧:
演示:http://jed.dzhope.com/yanshi.php
怎么样?不错吧grin
第一步:
在< head>和< /head>之间加上:


<script language="JavaScript" src="Calendar30.js"></script>



第二步:


<INPUT name=date type=text id="date" size=30 onfocus="calendar()">



或者



<INPUT name=notice_jdate type=text id="notice_jdate" size=30 onfocus="calendar()"><input type=button value=日期 onclick="calendar(document.form1.txt)">



下载Calendar30.js



如果觉得日历弹窗的样式不好看,还可以定制。

修改Calendar30.js里的



function TWebCalendar() //初始化日历的设置
{
   this.regInfo    = "关闭的快捷键:[Esc]";
   this.regInfo   += "&#13;&#13;";
   this.daysMonth  = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
   this.day        = new Array(39);            //定义日历展示用的数组
   this.dayObj     = new Array(39);            //定义日期展示控件数组
   this.dateStyle  = null;                     //保存格式化后日期数组
   this.objExport  = null;                     //日历回传的显示控件
   this.eventSrc   = null;                     //日历显示的触发控件
   this.inputDate  = null;                     //转化外的输入的日期(d/m/yyyy)
   this.thisYear   = new Date().getFullYear(); //定义年的变量的初始值
   this.thisMonth  = new Date().getMonth()+ 1; //定义月的变量的初始值
   this.thisDay    = new Date().getDate();     //定义日的变量的初始值
   this.today      = this.thisDay +"/"+ this.thisMonth +"/"+ this.thisYear;   //今天(d/m/yyyy)
   this.iframe     = window.frames("meizzCalendarIframe"); //日历的 iframe 载体
   this.calendar   = getObjectById("meizzCalendarLayer");  //日历的层
   this.dateReg    = "";           //日历格式验证的正则式

   this.yearFall   = 50;           //定义年下拉框的年差值
   this.format     = "yyyy-mm-dd"; //回传日期的格式
   this.timeShow   = false;        //是否返回时间
   this.drag       = true;         //是否允许拖动
   this.darkColor  = "#0000D0";    //控件的暗色
   this.lightColor = "#FFFFFF";    //控件的亮色
   this.btnBgColor = "#FFFFF5";    //控件的按钮背景色
   this.wordColor  = "#000080";    //控件的文字颜色
   this.wordDark   = "#DCDCDC";    //控件的暗文字颜色
   this.dayBgColor = "#E6E6FA";    //日期数字背景色
   this.todayColor = "#FF0000";    //今天在日历上的标示背景色
   this.DarkBorder = "#D4D0C8";    //日期显示的立体表达色
}   var WebCalendar = new TWebCalendar();



演示文件下载:


本来,很简单的事情,让我给讲复杂了。有不明白的就留言吧!


jed Email Homepage
2008-3-12 17:06
shy友情提示:firefox浏览器不支持JS时间控件!
jed Email Homepage
2006-12-17 10:49
我把演示页面也提供下载了,你下载下来研究研究吧!
3
2006-12-15 17:08
我以前都用起了,这次弄了好久,还是没有反映。
分页: 1/1 第一页 1 最后页
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]