好几个月没写博客了，一直在赶项目。项目现在终于处于稳定的状态，只是修修改改。作为后台程序员的我真是苦逼啊，从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. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  2. 表格与ckeckbox的全选与单选

    先看看下面的效果: 用户点击头的checkbox时,所有表格数据行的checkbox全选或反选. 当数据行某一行没有选中时,头checkbox去选.当所有数据行的checkbox全选时,头的check ...

  3. Java内部类final语义实现

    本文描述在java内部类中,经常会引用外部类的变量信息.但是这些变量信息是如何传递给内部类的,在表面上并没有相应的线索.本文从字节码层描述在内部类中是如何实现这些语义的. 本地临时变量 基本类型 fi ...

  4. [连载]《C#通讯（串口和网络）框架的设计与实现》- 11.调试器的设计

    目       录 第十一章     调试器设计... 2 11.1         调试接口... 2 11.2         界面方式调试... 3 11.3         命令行方式调试.. ...

  5. JS获取当前时间

    setInterval("getTime();", 1000); function getTime() { //document.getElementById('linkweb') ...

  6. Project server 2016 “没有为此项目配置网站”错误处理

    问题: 没有为此项目配置网站. There is no site configured for this project 解决办法: 依次点击设置>PWA设置>连接到sharepoint网 ...

  7. Java之this关键字的用法

    Java 中的 this 关键字指当前的对象,可以直接用其调用当前对象的成员变量,也可以直接用其调用当前对象的成员方法,这是我们常见的场景,那么有没有其它的情况呢! this 还可以在无参的构造方法中 ...

  8. Linux系统sar命令解析

    安装 如果系统没有该命令请安装: apt-get install sysstat yum install sysstat 安装完毕: vi /etc/default/sysstat ENABLED=& ...

  9. Oracle发送邮件，支持HTML，多收件人，多附件

    Oracle发邮件,权限问题 - 创建 ACL BEGIN DBMS_NETWORK_ACL_ADMIN.CREATE_ACL(acl => 'email_server_permissions. ...

  10. 机器学习实战笔记(Python实现)-07-分类性能度量指标

    1.混淆矩阵 下图是一个二类问题的混淆矩阵,其中的输出采用了不同的类别标签 常用的衡量分类性能的指标有: 正确率(Precision),它等于 TP/(TP+FP) ,给出的是预测为正例的样本中的真正 ...