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

    接上一篇 继续使用上一篇的project .将archive里无用的文件删除 添加我们需要的文件进来. config是一个文本文件. 注意所有文件的 destination都是 %appfolder% ...

  2. WebUtils-网络请求工具类

    网络请求工具类,大幅代码借鉴aplipay. using System; using System.Collections.Generic; using System.IO; using System ...

  3. ASP.NET Core 中间件Diagnostics使用

    ASP.NET Core 中间件(Middleware)Diagnostics使用.对于中间件的介绍可以查看之前的文章ASP.NET Core 开发-中间件(Middleware). Diagnost ...

  4. 关于c#在DataTable中根据条件删除某一行

    我们经常会将数据源放在DataTable里面,但是有时候也需要移除不想要的行,下面的代码告诉你们 DataTable dts:                DataRow[] foundRow;   ...

  5. Android Studio的SVN Performing VCS Refresh/Commit 长时间不结束

    给Android Studio项目里面的一个文件改名以后,再提交SVN时总是提示冲突,没办法解决.再后来不知道怎么弄的,每次提交时停留在SVN Performing VCS Refresh始终都不会完 ...

  6. POI操作Excel

    POI和Excel简介 JAVA中操作Excel的有两种比较主流的工具包: JXL 和 POI .jxl 只能操作Excel 95, 97, 2000也即以.xls为后缀的excel.而poi可以操作 ...

  7. java变量类型

    一.局部变量 局部变量声明在方法.构造方法或者语句块中: 局部变量在方法.构造方法.或者语句块被执行的时候创建,当它们执行完成后,变量将会被销毁: 访问修饰符不能用于局部变量: 局部变量只在声明它的方 ...

  8. FunDA（2）－ Streaming Data Operation：流式数据操作

    在上一集的讨论里我们介绍并实现了强类型返回结果行.使用强类型主要的目的是当我们把后端数据库SQL批次操作搬到内存里转变成数据流式按行操作时能更方便.准确.高效地选定数据字段.在上集讨论示范里我们用集合 ...

  9. JSP简单记录

    JSP,全称是Java Server Page,是运行在服务器端的页面,是建立在Servlet规范的动态网页技术,JSP文件在第一次请求时,会被编译成Servlet,所以JSP也可以看成是运行中的Se ...

  10. gRPC源码分析2-Server的建立

    gRPC中,Server.Client共享的Class不是很多,所以我们可以单独的分别讲解Server和Client的源码. 通过第一篇,我们知道对于gRPC来说,建立Server是非常简单的,还记得 ...