简单的Javascript日历源代码

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

苦于开发中使用时间的输入问题的解决 , 在网上借鉴了好多朋友的 Javascript 的日历 , 使用起来 , 效果不是太好 ( 主要就是显示的问题 , 老是在应用的过程中 , 不是出现滚动条 , 就是突然大了一块 ) 。自己琢磨着是否可以自己来弄一个，自己清楚。 

    我看到网上那些日历的源代码中，使用了一个 iframe 的标签，我不知道这个标签的作用，也搞不懂，没有使用。  

由于这段时间的 CSS 的学习，我知道了一个标签“ DIV ”。它似乎可以担当起 java 中那种没有标题栏的窗口，但是操作上复杂的多，没有用 Java 来得快。多的不说了，就说我的思路。 

这是在浏览器中效果：

IE6中效果：

Firefox效果：

在 IE7 中的运行结果显示的十分正常，但是在 IE6 中却有些遗憾，主要就是 z-index 似乎在 IE6 中不起作用，有些文本框都跑到了日历上边，这个问题我还没有办法解决，只能靠大家来一块了。 Firefox 中虽没有 IE6 中的问题，但是 top 或是 left 的问题老是给我一个“分析属性‘ *** ’值时出错。声明被丢弃”的错误，显示位置偏移的厉害，总的界面就如上边三个图所示。

ID 介绍：

 

Id=calendar 主要负责这个页面的放置 , 也是隐藏或是显示的控制对象。当文本获得焦点时，修改 CSS 脚本中 display ；当选择日期以后，则让其显示为 none 。

 

Id=header  主要负责日期操作元素的放置，日期初始为系统日期。

 

Id ＝ bodyer 主要负责周天的按钮的放置。

 

三个 ID 开始就是需要把显示控制好，我在 jsCalendar.css 中有非常详细的介绍，如果界面不合你的网站的风格，可以自己动手修改。

 

 

在本文中我主要介绍我的脚本方法：

 

介绍顺序从上到下，理解我得思路：

 

1、 document.writeln(……), 这一部分就是为了完成界面的创造和 ID 的设置（这一部分如果你对 ID 概念不是熟悉的话，请你查考一下网络上其他朋友的介绍，我这个日历日期控制就是依 ID 进行的）；

 

2、 全局变量

 

returnText ，存放需要日期输入的文本框对象，它可以在各个方法中使用，最终返回格式化的日期字符串；

 

top_final 存放日历控件的显示绝对纵坐标，可以参考我得上一文章（ offsetTop和offsetLeft 迷惑）；

 

left_final 存放日历控件的显示绝对横坐标

 

3、 showC （），这是文本中获得焦点时调用的方法，其中 initC （）方法完成了日历的初始工作，拿系统当前日期做为初始。至于 init （）中 changeC （）方法我们随后介绍；

 

4、 getTop （）和 getLeft （），这个主要介绍显示坐标的问题，如果不了解可以参考 blog offsetTop 和offsetLeft 迷惑；

 

5、 helpC(), 使用脚本的一个模式对话框，显示帮助信息，使用时注意目录的设置；

 

6、 hideC （）、 preYear （）、 nextYear （）、 preMonth （）、 nextMonth （），这几个方法非常好理解，看看界面就 OK 了，主要是都使用了脚本方法 getElementById(), 这个方法你一定需要掌握；其中的一个方法 yearMonthChange() ，触发年月改变日历显示同步调用 changeC （）；

 

7、 change （），这个方法是日历的核心，所有实现的效果都得依靠它。它根据 Data 类的特点计算出日期规律（注意在 javascript 中一月的显示为： 0 ；二月是： 1 ，和 java 中的一样），但是我们获得周天的接口可是没有 java 方便。就代码而讲：

 

       //dt1 “显示月”，我们已处理过的 month 在 yearMonthChange() 中 。

 

       var dt1=new Date(year,month);

 

       //dt2 “显示月”上一个月，我们主要得到上一个月的天数，显示日历中（不过不能操作）。

 

          var dt2=new Date(year,month-1);

 

       //dt3 “显示月”下一个月，我们主要依靠 getDay （）获得“显示月”的天数

 

          var dt3=new Date(year,month+1);

 

       // 这是获得“显示月”的第一天周几，我们循环的起点，如果你看过我得 writeln 中代码，你会注意到我在设置日期 ID 时的特点，日历的第一行从那一个 ID 加起（日期是连续的），循环到那个数字要看 endDate 。

 

          var firstDay=dt1.getDay();

 

       // 这样设置 dt3 ，可以使我们得到显示月的最后一天是几号，这样就得到了“显示月”的天数，注意这个方法 setDate （ 0 ）， 0 参数是上一月最后一天。

 

          dt3.setDate(0);

 

          var endDate=dt3.getDate();

 

       // 这可是“显示月”前几天的显示，递减获得效果

 

          dt1.setDate(0);

 

          var preMonthEndDay=dt1.getDate();

 

上面的介绍，我希望大家可以就着日历的显示来理解。

 

方法中的 for 循环完成日历的显示，根据 ID 的特点，分为三个部分：

 

a． 显示月日期

 

b． 显示月上一个月最后几天

 

c． 显示月下一个月前几天

 

判断条件就是依据 firstDay 和 endDate 。

 

如果这一部分让你感到迷惑，或是我得方法比较笨拙，给我留下你的建议，非常谢谢。

 

8、 getD （），得到我们需要的日期，这其中你可以改一下显示格式，我设定的是：

 

         2008-6-3 ，中间是“－”分割。

 

9 、至于日历中鼠标移动时显示改变，实现代码为：

 

             οnmοuseοver="this.className='mouseOver'"   οnmοuseοut="this.className='inputB'" ，通过 Css 代码完成的。

 

 

    这是我在使用 javascript 开发的第一个控件，原来非常的轻视脚本语言，认为没有什么难得，但是现在发现，脚本并非我想象的那样。但是还有一个就是不同的浏览器执行的效果不同，让人非常的苦恼。

 

我想把这一个日历控件作为第一个版本，随接着来进行文本框中日期在日历中特显，当前日期的特显，日历控件可以在随鼠标的拖动功能。希望大家多多的使用这个日历控件，有问题了可以给我留言，也希望高手多多的给我指点，完成还没有实现的功能。

 

源代码下载： js-Calendar.rar.mp3

 

由于 blog 不让上传 rar 文件，只能把压缩后的文件改为 mp3 ，如果需要查看，把 .mp3 去除即可。

 

源代码使用了两个编码格式（ gb2312 和 UTF － 8 ），如果编码格式不正确的话，可能不能正常的使用。

 

          使用方法我不用多讲，靠着 link ， script 导入。我在测试的时候发现，如果你把 script 放在 link 的前面，开始的显示可能有异常，这个问题我也是无法解释的，可能在于浏览器解释吧。

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>