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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
js实现本地时间同步功能
Aug 26 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
React key值的作用和使用详解
Aug 23 Javascript
史上最为详细的javascript继承(推荐)
May 18 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
Bootstrap3 图片(响应式图片&图片形状)
2017/01/04 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
puppeteer库入门初探
2019/01/09 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python学习 流程控制语句详解
2016/06/01 Python
详解Python装饰器由浅入深
2016/12/09 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
详解python配置虚拟环境
2019/04/08 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
档案室主任岗位职责
2014/02/12 职场文书
会计专业自荐信
2014/06/03 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2014年民警工作总结
2014/11/25 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers