js Calender控件使用详解

前端技术 2023/09/07 JavaScript

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

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

本文地址：https://www.stayed.cn/item/19519

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案