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 相关文章推荐
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
javascript实现列表切换效果
May 02 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
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 高手之路(一)
2006/10/09 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
深入研究React中setState源码
2017/11/17 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python的else子句使用指南
2016/02/27 Python
python matlibplot绘制3D图形
2018/07/02 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Numpy 多维数据数组的实现
2020/06/18 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
关于中国梦的演讲稿
2014/04/23 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
文明单位申报材料
2014/12/23 职场文书
解析Java异步之call future
2021/06/14 Java/Android