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 ready函数源代码研究
Dec 06 Javascript
javascript实现日期按月份加减
May 15 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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文件上传实例详解!!!
2007/01/02 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP Reflection API详解
2015/05/12 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
js实现div闪烁原理及实现代码
2014/06/24 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
jquery.validate使用详解
2016/06/02 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python搭建微信公众平台
2016/02/09 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
产品质量承诺范本
2014/03/31 职场文书
四年级学生评语大全
2014/04/21 职场文书
亮剑观后感500字
2015/06/05 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python