js Calender控件使用详解


Posted in Javascript onJanuary 05, 2015

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

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

Javascript 相关文章推荐
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
vue组件实现进度条效果
Jun 06 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
three.js中多线程的使用及性能测试详解
Jan 07 Javascript
js的回调函数详解
Jan 05 #Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 #Javascript
jQuery中removeProp()方法用法实例
Jan 05 #Javascript
jQuery中prop()方法用法实例
Jan 05 #Javascript
jQuery中removeAttr()方法用法实例
Jan 05 #Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 #Javascript
jquery.cookie.js使用指南
Jan 05 #Javascript
You might like
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
基于python实现文件加密功能
2020/01/06 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python能做什么
2020/06/02 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
园艺师求职信
2014/03/10 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
个人委托书
2014/07/31 职场文书
返乡农民工证明
2015/06/24 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript