基于jQuery日历插件制作日历(jquery日历插件代码)

编辑：rootadmin

推荐整理分享基于jQuery日历插件制作日历(jquery日历插件代码)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery日期加减,jquery日历框有长期的选项,jquery日历插件代码,jquery日历插件代码,jquery日期控件 datepicker,jquery日期插件,jquery日历插件代码,jquery日期插件,内容如对您有帮助，希望把文章链接给更多的朋友！

来看下最终效果图吧：

是长得丑了一点，不要吐槽我-。-

首先来说说这个日历主要的制作逻辑吧：

·一个月份最多有天，需要一个7X6的表格去装载

·如果知道了某个月份1号是星期几，这个月份有多少天，一个循环就可以显示某个月的日历了吧（眼睛都放光了*.*）

·加上一些控件让用户可以方便操作吧（比如可以输入年份、月份，可以点击选择年份、月份）

新建一个html文件，html结构：

再加点样式进去，打开浏览器看看效果：

看起来还不错，但是这是一个插件，要写这么多html的代码是不合理的，应该是在这个插件内部动态插入的，这样写也是为了直观演示。

要开始写JS代码了，现在要得知某月的1号是星期几，方便去遍历显示某月的日历出来，这里用到了蔡勒公式

PS：简单解释一下，蔡勒公式：var week = y + parseInt(y/4) + parseInt(c/4) - 2*c + parseInt(*(m+1)/) + d - 1;

c是年份的前两位，y是年份的后两份（年，c是，y就是）,m是月份,d是日期，把week%7后得出的结果就是星期几但是1,2月要当成上一年的,月进行计算，比如.2.3，就要换算成..3来使用蔡勒公式

week是正数和负数时求模是不一样的，负数时要 (week%7+7)%7，正数时直接求模 week%7，

还有得知道这个月份有多少天，1、3、5、7、8、、月是天，4、6、9、月是天，2月分闰年和平年，平年是天，闰年是天，闰年是能被4整除但不能被整除的，好了有了些前提下，还是能很快写出JS的

　　再打开浏览器看看，现在的日历是长这样

打开手机日历看一看，现在是年3月，嗯，长得一毛一样（得意脸）

现在要添加一些控件进去,两个输入框和四个按键,按键是使用了iconfont,html代码如下：

现在的日历是长这样子了

现在来给按键们都绑上点击事件,输入框绑上change事件

顺便在initCal()函数里面要把年份和月份的值用JQ的val()方法，放进input框里面就ok啦

结束语：这里呢并没有写成一个插件的形式，但是把这个日历的实现主要思路写好了，最近也是忙着写毕业论文，还有挺多东西想写下来分享的，总是感觉时间不够用，下次写一下怎么将这个日历写成一个chrome插件，就是下面这个

希望本文所述对jquery程序设计有所帮助。

使用jQuery操作HTML的table表格的实例解析最终效果图：简单来看一下其中的主要部分：HTML：.td_back_color{background-color:red;}.td_center{text-align:center;font-weight:bold;}CSS：tableid="tbl_count"caption春节聚会

Jquery实现简单的轮播效果(代码管用) 废话不多说了，直接给大家贴jquery代码了，具体代码如下所示：!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlelinkrel="stylesheet"href="css/index.css"scriptsrc="j

jQuery实现百叶窗焦点图动画效果代码分享(附源码下载) 这是一款基于jQuery的百叶窗焦点图动画，和之前介绍的CSS3百叶窗焦点图动画不同的是，它的兼容性更好，实用性更强，因为它是基于纯jQuery的，基本上

标签: jquery日历插件代码

本文链接地址:https://www.jiuchutong.com/biancheng/384002.html 转载请保留说明！

上一篇：jQuery Html控件基本操作(日常收集整理)(html5 jquery)

下一篇：使用jQuery操作HTML的table表格的实例解析