标题：日历弹窗的例子
出处：沧海一粟
时间：Thu, 07 Dec 2006 17:17:54 +0000
作者：jed
地址：http://www.dzhope.com/post/234/

内容：
在编程序的过程中，通常遇到这样的情况，要求用户输入日期，结果，他们输入的不规范，导致程序结果最后出现错误，今天，我从网上，搜了一下，找了相应的代码。效果不错，与大家分享一下。
先看看演示吧：
演示：http://jed.dzhope.com/yanshi.php
怎么样？不错吧[emot]grin[/emot]
第一步：
在< 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();




演示文件下载：
点击这里下载文件

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





Generated by Bo-blog 2.1.1 Release