PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

jQuery--联动日历

jQuery--联动日历

来源:phperz.com  作者:phper  发布时间:2012-06-09
来看下效果图 一、先来说下功能: 1.点击确定显示日历 2.再次点击隐藏,或从DOM中删除这个日历。如些反复第一,和第二这两步。 3.让日历中显示当前月份日期(多少天,每天是多少号)。 4.让当前月份的日期和星期几对应. 5.让左边两边的日历关联起来。 二、再来说下HTML结

来看下效果图

一、先来说下功能:

1.点击“确定”显示日历  

2.再次点击隐藏,或从DOM中删除这个日历。如些反复第一,和第二这两步。

3.让日历中显示当前月份日期(多少天,每天是多少号)。

4.让当前月份的日期和星期几对应.

5.让左边两边的日历关联起来。

二、再来说下HTML结构。

1.上面蓝色的是一个DIV,显示当前月分,和上月,下月。

2.下面的日期和星期,是用一个table结构存放数据。星期用thead,日期用:tbody存放。

三、功能展开分析:

3.1、前两个功能?

让我想起使用JQUERY里面的toggle。很方便就可以解决。

3.2、让日历中显示当前月份日期数?

既然跟日期有关的,肯定会想起Deta这个对象了。在这个对象中,我们可以获取或设某年,某天,某月,某日,某星期几。但就是不能直接获取这一个月中有多少天。?怎么办呢?

所以我们只能用判断了。根据当前月份的数值。来把天数存到一个变量当中。(对象获取到的当前月份要+1。国它是从零开始计算的).

比如现在是五月,根据判断,五月是大,所以变量中就存31这个数值;即这个月有31天。

3.3、让当前月份的日期和星期几对应.??

这个问题,解决办法就是,获取到当月一号,对应的星期几。后面的就可以依次排列下去了。这里的依次排列,我理解的是,因为存放日期的都是TD标签,在TBODY里面这些TD的索引,都是排列好的,所以把一号插入到那个TD当中,后面的二号,就会插入到后一个TD当中了。

3.4、让左边两边的日历关联起来。

这里重点是“关联”:我最近写了“倒计时”,再就是这次的"联动日历",还有让我想起了“联动下拉菜单”,比如省份和市的联动下拉菜单;这些都涉汲到“联动”.

我总结了一下,就是需要“联动”的东西,必定有一个“点”(先这么叫吧),其它需要变化,都要和这个点相关联起来,这样改变这个点,其它和这个点关联的东西,也就都会发生改变,也就实现了“联动”这一效果。

比如,上次的“倒计时”,里面的“点”,就是当前时间和设定以后时间,之前相差的"总毫秒数"。倒计时显示的,时,分,秒,都和这个"总毫秒数"有关联,只要这个“总毫秒数”变化,那么时,分,秒,都会变化,这就是"联动"了.

这次的日历联动,里面的"点",就是当前创建日期对象后,获得的年,月。根据这个年,月,来去设置右边,即下个月该显示的东西。那么只要当前获取的年,月,有变化,后面的自然也会变化。也就“联动”了。

当然里面还是有点小多细节,处理。

4.1分析下这代码结构看注解就可以明白的,以下几个步骤:

1.获得当前年份,月份(联动的“点”)

2.获得左边和右边对应月份的天数;

3.获得左边和右边月分当中一号,分别对应的是星期几

4.有了以上东西,我们就可以创建HTML结构了(因为要根据月份当中的日期排列,来决定,创建五行,还是六行。来显示日期)

5.将创建好的结构,插入到DOM当中

6.再将获得的天数,也就是日期数,插入到对应的表格存放日期的TD当中;

四、代码 见附件

五、总结

1.不用把TR分行处理,只接把tbody里面的td做为一个整体的数组,往里面插入数据;(因为显示的是数字,正好可以和)

2.“联动”的规则

3.像这种类似插入很多数据的东西,要用循解决。

4。像这种数据多的,应该先存放到数组中(因为本例显示的是数字,所以可以直接用循环里面的变量,如果是值,要先存放到数组中,根据索引取出来);

demo下载


延伸阅读:
php实现农历日历的代码
php日历类
PHP Image函数实现日历功能
用div+css技术生成的日历选择器
9个实用jQuery日历插件
10个美观实用的 jQuery/Mootool 日历插件
jQuery双日历插件 jQuery Datepicker
日期选择控件 jQuery DateInput 日历插件
27个华丽丽的 Web 日历组件 亮瞎你的狗眼
FullCalendar jQuery日历插件
用jquery日历插件FullCalendar打造outlook的日历效果
jquery日历插件timepicker
10 款 jQuery 日历插件
Tags: jQuery   联动日历   日历  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号