js Calender控件使用详解

2024-11-26 08:39:13

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

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

Android自定义日历Calender代码实现

产品要做签到功能,签到功能要基于一个日历来进行,所以就根据要求自定义了一个日历自定义控件相信做android都知道: (1)首先创建一个类,继承一个容器类或者是一个控件 (2)然后就是你需要设置的属性等的,在attrs文件夹中 (3)然后就是在类里边进行属性的设置以及布局等等功能的添加其实自定义一个日历问题都不多,很多人都会想到通过一个gridView然后填充就可以,确实是这样,主要是在显示每个月的第一天的位置以及每个月显示多少天有点绕. 思路:通过判断当前星期几然后进行日历的填充,但是填
Jquery Easyui日历组件Calender使用详解（23）

本文实例为大家分享了Jquery Easyui日历组件的实现代码,供大家参考,具体内容如下加载方式 Class加载 <div id="box" class="easyui-calendar" style="width:200px;height:200px;"></div> JS调用加载 <div id="box"></div> <script> $(function
javascript实现的淘宝旅行通用日历组件用法实例

本文实例讲述了javascript实现的淘宝旅行通用日历组件用法.分享给大家供大家参考. 在线演示:http://demo.jb51.net/js/2015/trip-calendar/demo.html PS:下面的演示代码,需要用到 trip-calendar.js与trip-calendar.css文件.打包下载地址具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">
php calender(日历)二个版本代码示例(解决2038问题)

注意32位机有2038问题,所以32位服务器的年限范围1970年~2038年我们还可以使用DateTime来规避这个问题(这样与32位64位无关了) 复制代码代码如下: <?php/** * * 我的日历 * date_default_timezone_set date mktime * @param int $year * @param int $month * @param string $timezone * @author fc_lamp * @blog: fc-lamp.blog
jQuery EasyUI框架中的Datagrid数据表格组件结构详解

基础DOM结构什么叫"完整的基础DOM结构",这里"基础"的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而"完整"的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构. 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个"基础完整DOM结构"是什么样子的: <!-- da
jQuery web 组件后台日历价格、库存设置的代码

/* * yagizaDate 1.0 * * Yagiza * Copyright 2016, MIT License * * IE 8+, Chrome, fireFox */ // * 字段说明 ******************** // buyNumMax 最多购买数 // buyNumMin 最少购买数 // cashback 返现 // price 售价.分销价.分销售价 // priceSettlement 结算价.采购价.分销结算价 // priceMarket 景区挂牌价
一起学写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=t
ASP.NET笔记之Calender的使用说明

1.介绍 (1.在Calender中,所有可选择的符号会显示下划线,这是因为它们在浏览器都会呈现为链接. 如果让用户可以选择某天.月.周,必须设置SelectionMode属性(Day. DayWeek.DayWeekMonth) (2 控件事件当用户选择了某一天或者月,可以用OnSelectionChanged来触发通过 Calendar1.SelectedDate.ToShortDateString();来获取所选择的时间点通过 Calendar1.SelectedD
Jquery Easyui搜索框组件SearchBox使用详解（19）

本文实例为大家分享了Jquery Easyui搜索框组件的实现代码,供大家参考,具体内容如下加载方式 Class加载 <input id="ss" class="easyui-searchbox" style="width:300px" data-options="prompt:'Please Input Value',menu:'#box'"> </input> <div id="b
php Calender(日历)代码分享

代码如下: 复制代码代码如下: <?php/** * * 我的日历 * date_default_timezone_set date mktime * @param int $year * @param int $month * @param string $timezone * @author fc_lamp */function myCalender($year = '', $month = '', $timezone = 'Asia/Shanghai'){ date_default_t

js Calender控件使用详解

相关推荐

随机推荐