苦于开发中使用时间的输入问题的解决
,
在网上借鉴了好多朋友的
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
,存放需要日期输入的文本框对象,它可以在各个方法中使用,最终返回格式化的日期字符串;
left_final
存放日历控件的显示绝对横坐标
3、
showC
(),这是文本中获得焦点时调用的方法,其中
initC
()方法完成了日历的初始工作,拿系统当前日期做为初始。至于
init
()中
changeC
()方法我们随后介绍;
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
(),得到我们需要的日期,这其中你可以改一下显示格式,我设定的是:
<chsdate w:st="on" isrocdate="False" islunardate="False" day="3" month="6" year="2008"></chsdate>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
的前面,开始的显示可能有异常,这个问题我也是无法解释的,可能在于浏览器解释吧。