Web页中的日历一般离不开表格，通常都使用表格装载指定月的日期等信息。所以，要编写JS日历，首先必须解决的问题是表格的行与列问题。列是固定的，七列，因为一周有七天。行需要动态计算，因为，每一个月的第一天是星期几是一个变数，因而第一天在表格中的第几个单元也就跟着变化，同时，每个月的总天数不一致也影响着各个月对表格行数的需要量。

一. 表格的行数问题
1.首先取得处理月的总天数
JS不提供此参数，我们需要计算。考虑到闰年问题会影响二月份的天数，我们先编写一个判断闰年的自编函数：

//判断是否为闰年

function is_leap(year) {

    //闰年的条件是符合下面二者之一：

    //(1)年份能被4整除，但不能被100整除；

    //(2)年份能被400整除。

    if((year%4==0 && year%100!=0)||(year%400==0)){

        return 1;

    }

    return 0;

}

接着定义一个包含十二个月在内的月份总天数的数组：

days_of_month = new Array(31, 28+is_leap(fullYear), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

days_of_month这个数组里，二月份的天数已经加入闰年的信息：28+is_leap(year)。数组元素从0开始，正好对应于JS提供的Date函数提供的getMonth返回值，即0表示一月，1表示二月，2表示三月，依此类推。

这样，各月总数可以这样取得：days_of_month[x]。其中，x为0至11的自然数。

2.计算处理月第一天是星期几

可以使用Date函数的getDay取得，返回的值从0到6，0表示星期一，1表示星期二，2表示星期三，其余依此类推。代码如下（假设要处理的时间为2008年3月）：

date=new Date(2008, 3, 1);

week=date.getDay();

有了月总天数和该月第一天是星期几这两个已知条件，就可以解决表格所需行数问题：（当前月天数+第一天是星期几的数值）除以七。表格函数需要整数，因此，我们使用Math.ceil来处理：

rows=Math.ceil((days_of_month[month] + week) / 7);

表格中的tr标签实际上代表表格的行，因此变量tr_str是我们往下写表格的重要依据。

二. 打印日历表格
可以使用两个for语句嵌套起来实现：外层for语句写行，内层for语句写单元格。

for(i=0;i<rows;i++) { //外层for语句 - tr标签

   document.write("<tr>");

   for(k=0;k<7;k++) { //内层for语句 - td标签

      idx=i*7+k; //表格单元的自然序号

      date_str=idx-firstday+1; //计算日期

      //这里是处理有效日期代码

   } //内层for语句结束

   document.write("</tr>");

} //外层for语句结束

单元格的自然序号是否代表有效日期非常关键，为此必须加入一个过滤机制：仅打印有效的日期。有效的日期大于0小于小于等于处理月的总天数。

三. 以下是完整的JS日历代码

<%@ page language="java" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

%>

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <title>自定义日历</title>

        <meta content="IE=edge" http-equiv="X-UA-Compatible">

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <meta http-equiv="Content-Language" content="zh-cn" />

        <meta name="author" content="linjiqin218@126.com" />

        <meta name="Copyright" content="parami|厦门波罗密网络科技有限公司" />

        <meta http-equiv="pragma" content="no-cache">

        <meta http-equiv="cache-control" content="no-cache">

        <meta http-equiv="expires" content="0">

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="This is my page">

        <script language="javascript">

        //判断是否为闰年

        function is_leap(year) {

            //闰年的条件是符合下面二者之一：

            //(1)年份能被4整除，但不能被100整除；

            //(2)年份能被400整除。

            if((year%4==0 && year%100!=0)||(year%400==0)){

                return 1;

            }

            return 0;

        }

        //var date = new Date(2013, 1, 4); //特定Date资讯

        var date = new Date(); //当前Date资讯

        var fullYear = date.getFullYear(); //获取年份

        var month = date.getMonth(); //获取月份，返回值是0(一月)到11(十二月)之间的一个整数。

        var date_of_month = date.getDate(); //获取日期，返回值是1~31之间的一个整数

        var first_date = new Date(fullYear, month, 1); //获取当前月第一天Date资讯

        //返回date对象星期中的一天，此值为0(周日)-6(周六)之间的一个整数

        var week = first_date.getDay(); //获取当前月第一天是星期几

        var days_of_month = new Array(31, 28+is_leap(fullYear), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //各月份的总天数

        var rows = Math.ceil((days_of_month[month] + week) / 7); //表格所需要行数

        var table='<table id="table" width="708px;" cellpadding="5" cellspacing="1">';

        table+="<tr bgcolor='#DEE9F4'>";

        table+="<td align='center'>日</td>";

        table+="<td align='center'>一</td>";

        table+="<td align='center'>二</td>";

        table+="<td align='center'>三</td>";

        table+="<td align='center'>四</td>";

        table+="<td align='center'>五</td>";

        table+="<td align='center'>六</td>";

        table+="</tr>";

        //打印表格第一行（有星期标志）

        for (i = 0; i < rows; i++) { //表格的行

            table += "<tr bgcolor='#DEE9F4'>";

            for (k = 0; k < 7; k++) { //表格每行的单元格

                idx = i * 7 + k; //单元格自然序列号

                date_str = idx - week + 1; //计算日期

                //过滤无效日期（小于等于零的、大于月总天数的）

                (date_str <= 0 || date_str > days_of_month[month]) ? date_str = "&nbsp;" : date_str = idx - week + 1; 

                //打印日期：今天底色为红

                if (date_str == date_of_month) {

                    table += "<td align='center' bgcolor='red'>" + date_str + "</td>"

                } else {

                    table += "<td align='center'>" + date_str + "</td>";

                }

            }

            table += "</tr>"; //表格的行结束

        }

        table += "</table>"; //表格结束

        document.write(table);

        </script>

    </head>

    <body>

    </body>

</html>

四. 效果如下图所示

如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】。
如果，您希望更容易地发现我的新博客，不妨点击一下左下角的【关注我】。
如果，您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是【Ruthless】。

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

自定义javascript日历控件的更多相关文章

  1. 推荐一款JavaScript日历控件：kimsoft-jscalendar

    一.什么是 kimsoft-jscalendar     一个简洁的avaScript日历控件,可在Java Web项目,.NET Web 项目中使用 二.kimsoft-jscalendar 有什么 ...

  2. JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...

  3. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  4. javascript日历控件

    以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就 ...

  5. JavaScript日历控件开发

    概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果 代码地址:https://github.com/aspwebchh/javascript-cont ...

  6. JavaScript日历控件！JS兼容IE6.7.FF.可挡住下拉控件

    原文发布时间为:2009-08-22 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  7. Android自定义View（CustomCalendar－定制日历控件）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/54020386 本文出自:[openXu的博客] 目录: 1分析 2自定义属性 3onMeas ...

  8. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  9. Android自定义控件之日历控件

      标签: android 控件 日历 应用 需求 2015年09月26日 22:21:54 25062人阅读 评论(109) 收藏 举报 分类: Android自定义控件系列(7) 版权声明:转载注 ...

随机推荐

  1. python(十一)、线程

    一.基本概念 进程是资源分配的基本单位,而线程则是CPU调度和分派的基本单位.系统需要执行创建进程.撤销进程和进程切换等任务,但创建进程开销大限制了并发的提高.因此,成百上千个进程会造成内存浪费,并且 ...

  2. js禁用后退

    history.pushState(null, null, document.URL);          window.addEventListener('popstate', function() ...

  3. Python Qt5 Creator 使用创建项目教程

    1.下载Creator 4.2.1 2.点击文件-新建项目-QT-QT designer Form 然后 choose 3. 4.窗口组件选择 5.下一步,然后就可以自己设计了,,, 最后说一下,保存 ...

  4. python环境搭建-Linux系统下python2.7升级python3.5.2步骤

    首先Python 查看版本 , 在Linux下特别注意权限问题,创建目录时候切记给予权限 如果是 ubnutu 请使用首先切换到 sudo su , 否则 make install 会出现问题.. 升 ...

  5. WinForm窗体继承自定义的模板窗体出错

    在开发Winform程序的时候,我们往往需要根据需要做一些自定义的控件模块,这样可以给系统模块重复利用,或者实现更好的效果等功能.而今天自定义一个窗体,然后子窗体继承的时候出现了一点问题. 问题: 在 ...

  6. [BZOJ5361][Lydsy1805月赛]对称数

    bzoj Description 给你一棵树,每个点有一个编号\(a_i\).\(Q\)组询问,每次问一条路径上最小的出现了偶数次的编号是多少(包括零次). 多组数据,\(T\le10,n,Q,a_i ...

  7. [Luogu4630][APIO2018]Duathlon 铁人两项

    luogu 题目描述 比特镇的路网由 \(m\) 条双向道路连接的 \(n\) 个交叉路口组成. 最近,比特镇获得了一场铁人两项锦标赛的主办权.这场比赛共有两段赛程:选手先完成一段长跑赛程,然后骑自行 ...

  8. 一个解决在非UI线程中访问UI 异常的小方法

    写 WPF 的童鞋可能都会碰到 在非UI线程中访问 UI 异常的问题.这是为了防止数据不一致做的安全限制. 子线程中更新UI还要交给主线程更新,引用满天飞,实在是麻烦. 接下来,我们推出一个可以称之为 ...

  9. 笔记：webpack 打包参数 mode development

    webpack 打包参数 mode development 在开发时使用 webpack 打包后不压缩,所以只需要在 webpack 打包命令中加上 --mode mode development 即 ...

  10. 关于2B的转义问题

    最近碰到了一个中文乱码问题,话说是这样的:模块A调模块B的1接口,B把A带过来的用户ID加密后返回一个链接,当用户点击该链接时,A解密该用户ID后再调B的2接口.简而言之,我们用流程看下:模块A -& ...