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>

　　<head>

　　td{ text-align: center;}

　　</style>

　　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>

　　</body>

　　</html>

　　代码重新做了改动，将视图的table换为了div,是为了解决IE的tableinnerHTML的只读问题。另外加了options是为了可配置性。

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

教程首页更多教程