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实现检测浏览器及版本的脚本代码
Jan 22 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
vue移动端模态框(可传参)的实现
Nov 20 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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python中PIL安装简单教程
2016/04/21 Python
浅谈django中的认证与登录
2016/10/31 Python
python自动裁剪图像代码分享
2017/11/25 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python自定义一个异常类的方法
2019/06/27 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python如何读写字节数据
2020/08/05 Python
酒店中秋节促销方案
2014/01/30 职场文书
庆元旦广播稿
2014/02/10 职场文书
整改通知书
2015/04/20 职场文书
求职自我评价参考范文
2019/05/16 职场文书
AJAX学习笔记
2021/05/18 Javascript
MySQL七种JOIN类型小结
2021/10/24 MySQL
mysql事务对效率的影响分析总结
2021/10/24 MySQL
redis中lua脚本使用教程
2021/11/01 Redis