45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:js Calender日历控件的知识介绍

js Calender日历控件的知识介绍

2016-05-11 14:09:44 来源:www.45fan.com 【

js Calender日历控件的知识介绍

最近看了一下关于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);

好了,我们用到的参数就这么多,后面其实就是关于日期对应周几的一些操作和判断,动态的拼接标签,下面就直接把我写的例子发出来:

效果图:

js Calender日历控件的知识介绍

<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是为了可配置性。
上面代码有简单说明,功能是最基础的,如果更深入的做可以进行扩展,希望这篇文章可以给大家一些启发。


本文地址:http://www.45fan.com/bcdm/49197.html
Tags: 一起 学写 Calender
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部