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 相关文章推荐
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
JS实现520 表白简单代码
May 21 Javascript
微信小程序实现漂亮的弹窗效果
May 26 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实现ping
2006/10/09 PHP
php基础知识:控制结构
2006/12/13 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
对python:循环定义多个变量的实例详解
2019/01/20 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
python利用platform模块获取系统信息
2020/10/09 Python
python中yield的用法详解
2021/01/13 Python
新护士岗前培训制度
2014/02/02 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
刊首寄语大全
2014/04/11 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
司机岗位职责
2015/02/04 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
社区文明倡议书
2015/04/28 职场文书
城南旧事观后感
2015/06/11 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
MySQL去除密码登录告警的方法
2022/04/20 MySQL