js Calender控件使用详解

更新时间：2015年01月05日 11:22:14 投稿：hebedich

这篇文章主要介绍了js Calender控件使用详解,需要的朋友可以参考下

最近一直在赶项目。项目现在终于处于稳定的状态，只是修修改改。作为后台程序员的我真是苦逼啊，从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是为了可配置性。

上面代码有简单说明，功能是最基础的，如果更深入的做可以进行扩展

您可能感兴趣的文章:

js
Calender

小程序视频或音频自定义可拖拽进度条的示例代码
这篇文章主要介绍了小程序视频或音频自定义可拖拽进度条的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
实现51Map地图接口(示例代码)
这篇文章主要介绍了实现51Map地图接口的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
这篇文章主要介绍了 JavaScript 实现自己的安卓手机自动化工具脚本,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
前台js改变Session的值(用ajax实现)
前台js改变Session的值,有很多的新手朋友对此问题会很陌生，本文将提供解决方法，需要了解的朋友可以参考下
2012-12-12
javascript笔记之匿名函数和闭包
这篇文章主要为大家详细介绍了javascript笔记之匿名函数和闭包的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
bootstrap组件之导航组件使用方法
Bootstrap 中的导航组件都依赖同一个 .nav 类和ul，状态类也是共用的。改变修饰类可以改变样式。接下来通过本文给大家介绍bootstrap 导航组件使用方法，一起看看吧
2017-01-01
小程序中实现获取全部数据的图文教程
最近在开发中遇到了一个需求,需要获取小程序的全部数据,所以这篇文章主要给大家介绍了关于小程序中实现获取全部数据的相关资料,需要的朋友可以参考下
2022-11-11
javascript 操作table的特性
javascript操作table的特性，大家可以看下，发挥下，实现更多的功能。
2009-09-09
Dom加载让图片加载完再执行的脚本代码
当大家使用window.onload执行一个函数时，必须要等到页面上的图片等信息全部加载完毕之后才执行的。但很多时候图片的数量比较多，所以需要很多时间下载。更令人尴尬的是，当网页文档（或者说Dom）已经加载完毕,而图片尚未加载完毕，很多用户已经开始浏览网页，但这时很多由window.onload所触发的函数不能执行，这就导致一部分功能不能完美地给用户使用，更严重的是会给用户留下不好的印象！
2008-05-05
原生js和jQuery随意改变div属性style的名称和值
用原生js和jQuery实现改变随意改变div属性style的名称和值的结果，这个实例比较实用，新手朋友们可以看看
2014-10-10