好几个月没写博客了，一直在赶项目。项目现在终于处于稳定的状态，只是修修改改。作为后台程序员的我真是苦逼啊，从web到手机端接口我都得写，杂七杂八的事情。。。这两天终于闲下来了，没事儿看了一下关于js日期的一些函数，突然想到了日历控件，于是试着写了一个，作为后台程序员的我水平有限，大家抱着学习的态度看看我写的这个例子吧。。。

首先一个常用的日期函数：Date(year,month,day)

var   date=new  Date();

获取年份
            var   year=this.date.getFullYear();

获取月份，这里是月索引所以要+1
            var   month=this.date.getMonth()+1;

获取当天是几号
            var   day=this.date.getDate();

获取当天是周几，返回0.周日   1.周一  2.周二  3.周三  4.周四  5.周五  6.周六
            var   week=this.date.getDay();

获取当月一号是周几

var     getWeekDay=function(year,month,day){
            var  date=new Date(year,month,day);
            return  date.getDay();
           }

　　　var   weekstart=  getWeekDay(this.year, this.month-1, 1)

获取当月的天数
         var  getMonthDays=function(year,month){
            var  date=new Date(year,month,0);
            return  date.getDate();
        }
        var   monthdays= this.getMonthDays(this.year,this.month);

好了，我们用到的参数就这么多，后面其实就是关于日期对应周几的一些操作和判断，动态的拼接标签，下面就直接把我写的例子发出来：

 <html>

 <meta  http-equiv="content-type" content="text/html;charset=utf-8">

 <head>

     <style type="text/css">

 td{ text-align: center;}

     </style>

     <script type="text/javascript">

 window.onload=function(){

     var   Calender=function(){

         this.Init.apply(this,arguments);

     }

     Calender.prototype={

         Init:function(container,options){

             this.date=new  Date();

             this.year=this.date.getFullYear();

             this.month=this.date.getMonth()+1;

             this.day=this.date.getDate();

             this.week=this.date.getDay();

             this.weekstart=this.getWeekDay(this.year, this.month-1, 1);

             this.monthdays= this.getMonthDays(this.year,this.month);

             this.containerDiv=document.getElementById(container);

             this.options=options!=null?options:{

                 border:'1px  solid green',

                 width:'400px',

                 height:'200px',

                 backgroundColor:'lightgrey',

                 fontColor:'blue'

             }

         },

         getMonthDays:function(year,month){

             var  date=new Date(year,month,0);

             return  date.getDate();

         },

         getWeekDay:function(year,month,day){

             var  date=new Date(year,month,day);

             return  date.getDay();

         },

         View:function(){

             var  tablestr='<table>';

               tablestr+='<tr><td colspan="3"></td><td>年:'+this.year+'</td><td colspan="3">月：'+this.month+'</td></tr>';

             tablestr+='<tr><td width="14%">日</td><td width="14%">一</td><td width="14%">二</td><td width="14%">三</td><td width="14%">四</td><td width="14%">五</td><td width="14%">六</td></tr>';

             var  index=1;

             //判断每月的第一天在哪个位置

             var  style='';

             if(this.weekstart<7)

             {

                 tablestr+='<tr>';

                  for (var i = 0; i <this.weekstart; i++) {

                      tablestr+='<td></td>';

                  };

                  for (var i = 0; i < 7-this.weekstart; i++) {

                     style=this.day==(i+1)?"background-Color:green;":"";

                      index++;

                      tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>';

                  };

                 tablestr+='</tr>';

             }

             ///剩余天数对应的位置

             //判断整数行并且对应相应的位置

             var  remaindays=this.monthdays-(7-this.weekstart);

             var  row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1))  ;

             var   count=Math.floor(remaindays/7);

             for (var i = 0; i < count; i++) {

                  tablestr+='<tr>';

                  for (var k = 0; k < 7; k++) {

                       style=this.day==(index+k)?"background-Color:green;":"";

                       tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index+k))+'>';

                       tablestr+=index+k;

                       tablestr+='</td>';

                  };

                  tablestr+='</tr>';

                  index+=7;

             };

             //最后剩余的天数对应的位置(不能填充一周的那几天)

             var  remaincols=this.monthdays-(index-1);

             tablestr+='<tr>';

             for (var i = 0; i < remaincols; i++) {

                 style=this.day==index?"background-Color:green;":"";

                 tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index))+'>';

                 tablestr+=index;

                 tablestr+='</td>';

                 index++;

             };

             tablestr+='</tr>';

             tablestr+='</table>';

             return  tablestr;

         },

         Render:function(){

            var  calenderDiv=document.createElement('div');

            calenderDiv.style.border=this.options.border;

            calenderDiv.style.width=this.options.width;

            calenderDiv.style.height=this.options.height;

            calenderDiv.style.cursor='pointer';

            calenderDiv.style.backgroundColor=this.options.backgroundColor;

            // calenderDiv.style.color=this.options.fontColor;

            calenderDiv.style.color='red' ;

            calenderDiv.onclick=function(e){

                 var  evt=e||window.event;

                 var   target=evt.srcElement||evt.target;

                 if(target&&target.getAttribute('val'))

                 {

                     alert(target.getAttribute('val'));

                 }

            }

             var  tablestr=this.View();

             this.tablestr=tablestr;

             calenderDiv.innerHTML=tablestr;

             var  div=document.createElement('div');

             div.style.width='auto';

             div.style.height='auto';

              div.appendChild(calenderDiv);

              ///翻页div

             var  pagerDiv=document.createElement('div');

             pagerDiv.style.width='auto';

             pagerDiv.style.height='auto';

                var  that=this;

                ///重新设置参数

             var    resetPara=function(year,month,day){

                     that.date=new  Date(year,month,day);

                     that.year=that.date.getFullYear();

                     that.month=that.date.getMonth()+1;

                     that.day=that.date.getDate();

                     that.week=that.date.getDay();

                     that.weekstart=that.getWeekDay(that.year, that.month-1, 1);

                     that.monthdays= that.getMonthDays(that.year,that.month);

             }

             //上一页

             var  preBtn=document.createElement('input');

              preBtn.type='button';

              preBtn.value='<';

               preBtn.onclick=function(){

                      that.containerDiv.removeChild(div);

                      resetPara(that.year,that.month-2,that.day);

                      that.Render();

              }

              //下一页

               var  nextBtn=document.createElement('input');

              nextBtn.type='button';

              nextBtn.value='>';

              nextBtn.onclick=function(){

                      that.containerDiv.removeChild(div);

                      resetPara(that.year,that.month,that.day);

                      that.Render();

              }

              pagerDiv.appendChild(preBtn);

              pagerDiv.appendChild(nextBtn);

              div.appendChild(pagerDiv);

              var  dropDiv=document.createElement('div');

              var    dropdivstr='';

              //选择年份

               dropdivstr+='<select id="ddlYear">';

               for (var i = 1900; i <= 2100; i++) {

                 dropdivstr+=

                 i==that.year

                 ?'<option  value="'+i+'" selected="true">'+i+'</option>'

                 : '<option  value="'+i+'">'+i+'</option>';

               };

              dropdivstr+='</select>';

            //选择月份

             dropdivstr+='<select id="ddlMonth">';

               for (var i = 1; i <= 12; i++) {

                 dropdivstr+=

                 i==that.month

                 ?'<option  value="'+i+'" selected="true">'+i+'</option>'

                 : '<option  value="'+i+'">'+i+'</option>';

               };

              dropdivstr+='</select>';

              dropDiv.innerHTML=dropdivstr;

              div.appendChild(dropDiv);

            that.containerDiv.appendChild(div);

              ///绑定选择年份和月份的事件

              var  ddlChange=function(){

                      var  ddlYear=document.getElementById('ddlYear');

                     var  ddlMonth=document.getElementById('ddlMonth');

                     var   yearIndex=ddlYear.selectedIndex;

                     var  year=ddlYear.options[yearIndex].value;

                     var   monthIndex=ddlMonth.selectedIndex;

                     var  month=ddlMonth.options[monthIndex].value;

                     that.containerDiv.removeChild(div);

                     resetPara(year,month-1,that.day);

                     that.Render();

              }

             ddlYear.onchange=function(){

                  ddlChange();

             }

              ddlMonth.onchange=function(){

                  ddlChange();

             }

         }

     }

     var   calender=new  Calender('dvTest',{

                 border:'1px  solid green',

                 width:'400px',

                 height:'200px',

                 backgroundColor:''

                 }

                 );

     calender.Render();

 }

     </script>

 </head>

 <body>

   <div id="dvTest"></div>

 </body>

 </html>

代码重新做了改动，将视图的table换为了div,是为了解决IE的tableinnerHTML的只读问题。另外加了options是为了可配置性。

上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展，如有疑问或者要交流的东西请加qq546558309  ，或者发到我的邮箱a546558309@163.com

学写js Calender控件的更多相关文章

  1. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  2. JS日历控件 灵活设置: 精确的时分秒.

     在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下:      1. 在原基础上 支持 yyyy-mm-dd 的年月 ...

  3. js树形控件

    js树形控件 ztree http://www.treejs.cn/

  4. Atitit.js图表控件总结

    Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条 ...

  5. js设置控件的隐藏与显示的两种方法

    js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...

  6. 简洁JS 日历控件 支持日期和月份选择

    原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...

  7. js获取控件位置以及不同浏览器中的差别

    js获取控件位置(坐标位置)在不同浏览器中的差别. //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var h ...

  8. JS日历控件集合----附效果图、源代码

    http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...

  9. 利用js日期控件重构WEB功能

    开发需求:网页中的日期部门(注册页面和查询条件)都用js日期控件重写 页面一:更新员工页面 empUpdate.jsp 中增加 onfocus 事件 入职日期:<input id="h ...

随机推荐

  1. LCS记录

    如题:求两个序列的最长公共序列.(如:"ABCBDAB"与"BCDB"最长公共序列为"BCDB")代码如下: #define MAX_SIZ ...

  2. 『.NET Core CLI工具文档』（八）dotnet-restore

    说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:dotnet-restore 翻译:dotnet-restore 名称 dotnet-restore - 还原一个项目的 ...

  3. 【.NET MF】.NET Micro Framework USB移植

    1.开发环境 windows 7  32位 MDK 4.54 .Net Micro Framework Porting Kit 4.2(RTM QFE2) .Net Micro Framework   ...

  4. Git 相关总结

    Git 优秀在线教程 廖雪峰-史上最浅显易懂的Git教程!

  5. Python 操作 MS Excel 文件

    利用 Python 对 Excel 文件进行操作需要使用第三方库: openpyxl,可执行 pip install openpyxl 进行安装 1. 导入 openpyxl 模块 导入 openpy ...

  6. Java面试题整理二（侧重SSH框架）

    1.持久化对象的状态都有哪些? 答:瞬时对象(Transient Objects):使用new 操作符初始化的对象不是立刻就持久的.它们的状态是瞬时的,也就是说它们没有任何跟数据库表相关联的行为,只要 ...

  7. 详细介绍Mysql各种存储引擎的特性以及如何选择存储引擎

    最近业务上有要求,要实现类似oracle 的dblink   linux版本 Server version: 5.6.28-0ubuntu0.14.04.1 (Ubuntu) 修改配置文件 /etc/ ...

  8. Atitit.数据检索与网络爬虫与数据采集的原理概论

    Atitit.数据检索与网络爬虫与数据采集的原理概论 1. 信息检索1 1.1. <信息检索导论>((美)曼宁...)[简介_书评_在线阅读] - dangdang.html1 1.2. ...

  9. Junit单元测试

    写一个被测试的类 这是类中的一些方法,将一个16进制转化为10进制 reckon()为转化的主要方法,返回结果为10进制数 judge()判断字符是否在0-9,A-F之间,并将字符转化为0-15之中的 ...

  10. [MySQL Reference Manual] 24 MySQL sys框架

    24 MySQL sys框架 24 MySQL sys框架 24.1 sys框架的前提条件 24.2 使用sys框架 24.3 sys框架进度报告 24.4 sys框架的对象 24.4.1所有sys下 ...