好几个月没写博客了，一直在赶项目。项目现在终于处于稳定的状态，只是修修改改。作为后台程序员的我真是苦逼啊，从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中取消后续执行的内容

    <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title&g ...

  2. 配置IIS的通配符应用程序映射

    使用IIS 6架设网站,如果要使用伪静态的功能,可能需要设置“通配符应用程序映射(执行顺序)”. 在Windows Server 2012 r2 的IIS 8中,对应的是添加设置“通配符脚本映射”,参 ...

  3. JavaWeb_day08_EL JSTL

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! day08 EL JSTL EL表达式 语法:${} ...

  4. java泛型基础

    泛型是Java SE 1.5的新特性, 泛型的本质是参数化类型, 也就是说所操作的数据类型被指定为一个参数. 这种参数类型可以用在类.接口和方法的创建中, 分别称为泛型类.泛型接口.泛型方法.  Ja ...

  5. 运算符.png

  6. 【原】EasyUI ComboGrid 集成分页、按键示例

    需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下键在表格中移动选择行数据: 4.可以使用回车键在表格中选中行数据: 5.在下拉框的文本框中输入内容,能查询表格: 6. ...

  7. JavaScript中的slice,splice,substr,substring,split的区别

    万恶的输入法,在sublime中会显示出繁体字,各位看官见谅. 1.slice()方法:该方法在数组和string对象中都拥有. var a = [1,2,3,4,5,6]; var s = 'thi ...

  8. 利用NSCalendar类实现日期的比较

    在项目中日期的显示经常会当天的显示时分,当月的显示日时和分,以此类推,难免会涉及到日期的比较,下面介绍一下日期比较的两种方法 比较日期有两种方法 一种是通过系统的NSCalendar类实现 NSStr ...

  9. js与native交互

    js与native交互 UIWebView Native调用JS,使用stringByEvaluatingJavaScriptFromString来解释执行js脚本. //script即为要执行的js ...

  10. button自适应宽度 并根据屏幕宽自动换行排列

    这是一个封装好的类TagListView, 1. 只需要调用两个方法 设置宽度,间距,边距 并赋给它需要显示的字符串数组; 2. 遵循tagListView的协议, 并实现返回buttonView的方 ...