上个星期看到同事做一个有关日历提醒功能的需求,为了找个插件也是费了不少心思,然后刚好有时间就试着写了一个简单demo

来看下最终效果图吧:

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

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

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

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

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

新建一个html文件,html结构:

<div class="container">
<input type="text" value="" id="cal-input"/>
<div class="cal-box">
<table>
<thead>
<tr>
<td class="sun">日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td class="sta">六</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>

再加点样式进去,打开浏览器看看效果:

 thead td,tbody td{
width: 20px;
height: 20px;
       text-align: center;
}
thead td.sun,thead td.sta{
color: #eec877;
}
tbody td{
border: 1px solid #eee;
}

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

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

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

  c是年份的前两位,y是年份的后两份(2016年,c是20,y就是16),m是月份,d是日期,把week%7后得出的结果就是星期几

但是1,2月要当成上一年的13,14月进行计算,比如2016.2.3,就要换算成2015.14.3来使用蔡勒公式

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

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

$(function(){
var $td = $('tbody').find('td'); var date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),days; function initCal(yy,mm,dd){
if(mm ==2 && yy%4 == 0 && yy%100 !==0 ){
days = 28;
}else if(mm == 1 || mm == 3 || mm == 5 || mm == 7 || mm == 8 || mm == 10 || mm == 12){
days = 31;
}else if(mm==4 || mm==6 || mm==9 || mm==11 ){
days = 30;
}else{
days = 29;
} var m = mm < 3 ? (mm == 1 ? 13 : 14): mm;
yy = m > 12 ? yy - 1 : yy;
var c = Number(yy.toString().substring(0,2)),
y = Number(yy.toString().substring(2,4)),
d = 1;
//蔡勒公式
var week = y + parseInt(y/4) + parseInt(c/4) - 2*c + parseInt(26*(m+1)/10) + d - 1; week = week < 0 ? (week%7+7)%7 : week%7; for(var i=0 ;i<42;i++){
$td.eq(i).text('');    //清空原来的text文本
} for(var i = 0;i < days; i++){
$td.eq( week % 7 +i).text(i+1);    
}
} initCal(year,month,day);
})

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

打开手机日历看一看,现在是16年3月,嗯,长得一毛一样(得意脸)

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

<div class="container">
<input type="text" value="" id="cal-input"/>
<div class="cal-box">
<div class="cal-control-box">
<div class="wif iw-bofangqixiayiqu left"></div>
<div class="wif iw-iconfont-bofang left"></div>
<input type="" value=""/>
<span>年</span>
<input type="" value=""/>
<div class="wif iw-iconfont-bofang right"></div>
<div class="wif iw-bofangqixiayiqu right"></div>
</div>
<table>
<thead>
<tr>
<td class="sun">日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td class="sta">六</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>

现在的日历是长这样子了

  

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

//更改月份按钮
$(document).on("click",".iw-iconfont-bofang",function(){
if($(this).hasClass("left")){
//判断加还是减
if(month == 1 ){
month = 12;
year--;
}else{
month--;
}
}else{
if(month == 12){
month = 1;
year ++;
}else{
month ++;
}
}
initCal(year,month,day);
}) //更改年份
$(document).on("click",".iw-bofangqixiayiqu",function(){
if($(this).hasClass("left")){
year--;
}else{
year++;
}
initCal(year,month,day);
})
//年份输入
$(document).on("change","input.cal-year",function(){
year = $(this).val();
initCal(year,month,day);
}) //月份输入
$(document).on("change","input.cal-month",function(){
month = $(this).val();
initCal(year,month,day);
})

  

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

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

日历插件放到我的github上了,传送门:https://github.com/weapon-xx

文中如有错误,欢迎大家指正:)

  

基于jQuery的日历插件的更多相关文章

  1. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

  2. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  3. 基于jQuery头像裁剪插件cropbox

    今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...

  4. 基于jQuery的用户界面插件集合---EasyUI

    easyui是一种基于jQuery的用户界面插件集合.为创建现代化,互动,JavaScript应用程序,提供必要的功能.使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以 ...

  5. 基于jQuery的tooltips插件--poshytip

    摘要: 分享一款在项目中使用的tooltips插件--poshytip,这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, ...

  6. 一款基于jQuery的分页插件

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  7. 基于Jquery、JqueryUI插件编写

    刚开始编写jquery插件的时候,只是从网上找个模板看着写,并不理解.刚刚仔细把官网的API看了下,突然觉得豁然开朗了.马上放假了想着应该整理整理不然忘了又. How to create a Jque ...

  8. 基于jquery 的分页插件,前端实现假分页效果

    上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...

  9. 基于jQuery的自定义插件:实现整屏分页转换的功能

    动态创建jQuery插件 一.实现功能: 1.基本功能:自适应式整屏分页功能的实现 2.通过鼠标点击标签页转换分页,支持键盘上下左右键的转换分页,同样支持 鼠标滚轮上下滑动转换分页 3.切屏时的动画效 ...

随机推荐

  1. js弹出图片原图效果

    1.将js方法独立出来common.js function openwin(src){ var basePath = document.getElementById("basePath&qu ...

  2. Android开发者:你真的会用AsyncTask吗?

    [导读]在Android应用开发的过程中,我们需要时刻注意保证应用程序的稳定和UI操作响应及时,因为不稳定或响应缓慢的应用将给应用带来不好的印象,严重的用户卸载你的APP,这样你的努力就没有体现的价值 ...

  3. HTML5 canvas 绘图步骤

    1.先把canvas选出来,不选出来你往哪儿画! var oCan=  document.getElementById('xxx'); 2.声明基于 canvas 的context对象,没他你怎么调用 ...

  4. ios网站,博客

    中文 网站系列 objcio.cncocoachina.comcode4app.com泰然网 博客系列唐巧地球人都知道哈.http://blog.devtang.com/巧哥新出书了,速度入手吧. 虾 ...

  5. c# string.Format用法总结

    文章出处:http://www.cnblogs.com/7788/archive/2009/05/13/1455920.html 先举几个简单的应用案例: 1.格式化货币(跟系统的环境有关,中文系统默 ...

  6. .Net知识点总结(一)

    1.文件上传:Jquery.uploadify  它依赖于flash  舍去起上传   功能  改用SWFupload  他是第三方的插件 2.验证码激活的时候,邮箱开始是写死的,但是为了以后更改邮箱 ...

  7. ExtJs之VTYPE验证

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  8. eclipse引入tomcat

    1.默认大家的tomcat都已经安装好了,这里打开eclipse,选择windows,下面的属性(preference). 2.进入到属性配置页,选择server  --   runtime Envi ...

  9. Project Euler 109 :Darts 飞镖

    Darts In the game of darts a player throws three darts at a target board which is split into twenty ...

  10. RSS FEED的应用

    参考:http://inezha.com/help/feedrss 今天工作中遇到了一个知识是RSS FEED.当时觉得很奇怪,我们要这个干嘛用?RSS Feed就是一个xml文件.里面不包含数据,但 ...