好几个月没写博客了，一直在赶项目。项目现在终于处于稳定的状态，只是修修改改。作为后台程序员的我真是苦逼啊，从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. 关于Quartz.NET作业调度框架的一点小小的封装，实现伪AOP写LOG功能

    Quartz.NET是一个非常强大的作业调度框架,适用于各种定时执行的业务处理等,类似于WINDOWS自带的任务计划程序,其中运用Cron表达式来实现各种定时触发条件是我认为最为惊喜的地方. Quar ...

  2. PyQt4入门学习笔记（二）

    之前第一篇介绍了pyqt4的大小,移动位置,消息提示.这次我们介绍菜单和工具栏 QtGui.QmainWindow这个类可以给我们提供一个创建带有状态栏.工具栏和菜单栏的标准的应用. 状态栏 状态栏是 ...

  3. [Oracle] Bulk Insert Data

    命名空间:Oracle.DataAccess.Client 组件:Oracle.DataAccess.dll(2.112.1.0) ODP.NET 版本:ODP.NET for .NET Framew ...

  4. spring/spring boot/spring cloud开发总结

    背景        针对RPC远程调用,都在使用dubbo.dubbox等,我们也是如此.由于社区暂停维护.应对未来发展,我们准备尝试新技术(或许这时候也不算什么新技术了吧),选择使用了spring ...

  5. gRPC源码分析0-导读

    gRPC是Google开源的新一代RPC框架,官网是http://www.grpc.io.正式发布于2016年8月,技术栈非常的新,基于HTTP/2,netty4.1,proto3.虽然目前在工程化方 ...

  6. Mysql增加、删除和修改列属性和约束，和一些有用的查询语句

    最近在整理关于MySql的东西,把一些需要记录的东西写下来,以便以后查询和浏览,以下是一些操作技巧.添加表字段alter table` 表名称` add transactor varchar(10) ...

  7. mysql主从之slave-skip-errors和sql_slave_skip_counter

    一般来说,为了保险起见,在主从库维护中,有时候需要跳过某个无法执行的命令,需要在slave处于stop状态下,执行 set global sql_slave_skip_counter=1以跳过命令.但 ...

  8. 转 threejs中3D视野的缩放实现

    Threejs基础部分学习知道透视相机new THREE.PerspectiveCamera(fov, aspect , near,far)中. fov视野角(拍摄距离)越大,场景中的物体越小.fov ...

  9. Atitit.uke 团队建设的组织与运营之道attilax总结

    Atitit.uke 团队建设的组织与运营之道attilax总结 1. intro引言:2 2. aims组织成立宗旨2 1.1. Mission组织使命2 1.2. val核心价值观2 1.3. c ...

  10. 客户关系管理系统-CRM源码

    QQ:2112326142   邮箱:jxsupport@qq.com 本公司开发的CRM源代码系统一份,附源代码,本公司产品唯一销售客服QQ号:2112326142  请联系此QQ号,以免给您的工作 ...