jQuery 联动日历实现代码


Posted in Javascript onMay 31, 2012

来看下效果图
jQuery 联动日历实现代码
一、先来说下功能:

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、让左边两边的日历关联起来。

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

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

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

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

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

四、上代码,太长了,所以只放了结构,里面的内容可以下载文章最后的DEMO

$(function(){ 
var nowDate = $(".nowDate"), //左边的日历盒子 
nextDate = $(".nextDate"), //右边的日历盒子 
lstrTd = "", //左日期的行的DOM结构 
rstrTd = "", //右日期的行的DOM结构 
lrows = 0, //左日期行数 
rrows = 0, //右日期行数 
iHtmlNow = "", //左边的日历结构 
iHtmlNext = "", //右边的日历的结构 
nowTitleDateY = "", //左边标题年份 
nowTitleDateM = "", //左边显示的月份 
nowlastM = "", //左边的翻月显示 
nextTitleDateY = "", //右边标题年份 
nextTitleDateM = "", //右边显示的月份 
nextLastM = "", //右边的翻月显示 
creatbtu = true, //只创建一次HTML结构的开关 
NumDay = 0, //左边每个月的天数; 
rNumDay = 0, //左边每个月的天数; 
lfday = 0, //左边当前月份的第一天,是星期几 
rfday = 0; //右边当前月份的第一天,是星期几 
//创建日期行 
function creatTr(l,r){ 
} 
/*创建当前和下一个月的日期和年份 
*这里分三种情况,当前月为12月 当前月为11月,当前月为1月 
*/ 
function getTitleDate(){ 
var odate = new Date(); 
//如果当前月是12月分,那么右边的月份,就应该是1月份 
//如果当前月是11月分,那么右边的月份,就应该是1月份 
//如果当前月是1月分,那么左边的月份,就应该是12月份 
} 
/*获取当前月份的一号,是星期几 
*首先设置你创建日期对象的年份,月份,和你需要知道的日期数,把这些设置好之后,再使用getDay()方法,就可以获取你设置日期的,星期数了; 
*/ 
function getfirstD(m1,y1,m2,y2){ 
} 
//根据大小月份取得天数 
function getTdDay(m1,y1,m2,y2){ 
} 
//根据传入的年份参数,判断是否是润年,即能够被4整除,但不能被100整除,同时满足时;或者能被400整除; 
function isRunYear(y){ 
} 
//创建HMTL结构 
function creatHtml(creatbtu){ 
//根据当前月份的一号是星期几,来生成有几行存放所有日期 
} 
//将日期插入到对应的TD当中 
function insertdate(d,t){ 
//插入到左边 
//插入到边 
} 
//插入到DOM 
function insertHtml(){ 
} 
//从DOM中删除 
function delHtml(){ 
} 
//点击确定显示或隐藏日历 
$("input[type=button]").toggle(function(){ 
//加这个判断是防止连续点击确定按钮 
if(!nowDate.add(nextDate).is(":animated")&&nowDate.add(nextDate).is(":empty")){ 
//获得标题上面的年份和月份 
getTitleDate(); 
//获得左和右的月份的天数 
getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY); 
//获得左和右的月份一号是星期几 
getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY); 
//创建HTML结构 
creatHtml(); 
//将结构插入到DOM当中 
insertHtml(); 
//插入日期到左和右的表格TD当中 
insertdate(lfday,rfday); 
//展开日期 
nowDate.add(nextDate).slideDown(200); 
} 
},function(){ 
//加这个判断是防止连续点击 
if(!nowDate.add(nextDate).is(":animated")){ 
//收起日历 
nowDate.add(nextDate).slideUp(200); 
//从DOM中删除日历结构 
delHtml(); 
} 
}); 
})

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

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

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

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

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

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

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

五、总结

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

2.“联动”的规则

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

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

在线演示:http://demo.3water.com/js/2012/mycalendar/
DEMO下载:mycalendar_3water.rar

Javascript 相关文章推荐
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 #Javascript
javascript 快速排序函数代码
May 30 #Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 #Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 #Javascript
基于jquery的鼠标拖动效果代码
May 30 #Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 #Javascript
基于jQuery的倒计时实现代码
May 30 #Javascript
You might like
php 日期时间处理函数小结
2009/12/18 PHP
php内嵌函数用法实例
2015/03/20 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
accesskey 提交
2006/06/26 Javascript
JavaScript中的History历史对象
2008/01/16 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Python3实现Web网页图片下载
2016/01/28 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python线程信号量semaphore使用解析
2019/11/30 Python
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
智能钱包:Ekster
2019/11/21 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
经济系大学生求职信
2013/10/01 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
业务员自荐信范文
2014/04/20 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
违纪学生保证书
2015/02/27 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis