js Calender控件使用詳解

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

這篇文章主要介紹了js Calender控件使用詳解,需要的朋友可以參考下

最近一直在趕項(xiàng)目。項(xiàng)目現(xiàn)在終于處于穩(wěn)定的狀態(tài)，只是修修改改。作為后臺程序員的我真是苦逼啊，從web到手機(jī)端接口我都得寫，雜七雜八的事情。。。這兩天終于閑下來了，沒事兒看了一下關(guān)于js日期的一些函數(shù)，突然想到了日歷控件，于是試著寫了一個，作為后臺程序員的我水平有限，大家抱著學(xué)習(xí)的態(tài)度看看我寫的這個例子吧。。。

首先一個常用的日期函數(shù)：Date(year,month,day)

復(fù)制代碼代碼如下:

var date=new Date();

獲取年份

復(fù)制代碼代碼如下:

var year=this.date.getFullYear();

獲取月份，這里是月索引所以要+1

復(fù)制代碼代碼如下:

var month=this.date.getMonth()+1;

獲取當(dāng)天是幾號

復(fù)制代碼代碼如下:

var day=this.date.getDate();

獲取當(dāng)天是周幾，返回0.周日 1.周一 2.周二 3.周三 4.周四 5.周五 6.周六

復(fù)制代碼代碼如下:

var week=this.date.getDay();

獲取當(dāng)月一號是周幾

復(fù)制代碼代碼如下:

       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)

獲取當(dāng)月的天數(shù)

復(fù)制代碼代碼如下:

         var  getMonthDays=function(year,month){

            var  date=new Date(year,month,0);

            return  date.getDate();

        }

        var   monthdays= this.getMonthDays(this.year,this.month);

好了，我們用到的參數(shù)就這么多，后面其實(shí)就是關(guān)于日期對應(yīng)周幾的一些操作和判斷，動態(tài)的拼接標(biāo)簽，下面就直接把我寫的例子發(fā)出來：

復(fù)制代碼代碼如下:

<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>';

            }

            ///剩余天數(shù)對應(yīng)的位置

            //判斷整數(shù)行并且對應(yīng)相應(yīng)的位置

            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;

            };

            //最后剩余的天數(shù)對應(yīng)的位置(不能填充一周的那幾天)

            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;

               ///重新設(shè)置參數(shù)

            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>